/*
 * Design tokens — replica Bridge globalmirex.com 1:1
 * Extras din Qode Options live la 2026-04-29
 */

:root {
  /* Brand — Italian heritage colors */
  --gm-red: #eb2819;          /* primary accent — italian red */
  --gm-red-h: 7;
  --gm-red-s: 84%;
  --gm-red-l: 51%;
  --gm-green: #26a51d;        /* secondary — italian green */
  --gm-walnut: #87675a;       /* tertiary brown */
  --gm-walnut-text: #68534b;  /* H1-H3 + body text — distinct token din Fonts */
  --gm-cream: #f9f1ee;        /* page background */
  --gm-rose: #e2a491;         /* selection */
  --gm-orange: #fd933e;       /* footer link hover */

  /* Neutrals */
  --gm-white: #ffffff;
  --gm-text-muted: #a2a2a2;   /* H4 + footer body */
  --gm-text-strong: #3c3c3c;  /* footer titles */
  --gm-rule: #d9d9d9;         /* hairline borders */

  /* Page bg & cards */
  --gm-bg: var(--gm-cream);
  --gm-bg-card: var(--gm-white);
  --gm-bg-overlay: rgba(135, 103, 90, 0.92);  /* maro overlay pentru hero text — match Bridge */
  --gm-bg-section-dark: #5b4538;              /* section background dark — Istoricul, Compania în cifre */

  /* Typography — match LIVE Bridge (HK Nova → Inter free alternative + Cookie cursive script) */
  --gm-font-display: 'Inter', 'Century Gothic', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --gm-font-body: 'Inter', 'Century Gothic', system-ui, -apple-system, sans-serif;
  --gm-font-script: 'Cookie', cursive;  /* H2 + H3 + script titles — match live exact */
  --gm-font-mono: ui-monospace, 'Courier New', monospace;

  /* Type scale match Bridge */
  --gm-h1-size: 40px;
  --gm-h1-line: 48px;
  --gm-h2-size: 30px;
  --gm-h2-line: 40px;
  --gm-h3-size: 21px;
  --gm-h4-size: 20px;
  --gm-h4-line: 28px;
  --gm-h5-size: 15px;
  --gm-h5-line: 26px;
  --gm-body-size: 16px;
  --gm-body-line: 27px;
  --gm-menu-size: 20px;

  /* Layout */
  --gm-container: 1300px;
  --gm-container-narrow: 1100px;
  --gm-header-height: 100px;

  /* Spacing scale (8px base) */
  --gm-s-1: 4px;
  --gm-s-2: 8px;
  --gm-s-3: 16px;
  --gm-s-4: 24px;
  --gm-s-5: 32px;
  --gm-s-6: 48px;
  --gm-s-7: 64px;
  --gm-s-8: 96px;
  --gm-s-9: 128px;

  /* Effects */
  --gm-radius-sm: 4px;
  --gm-radius: 8px;
  --gm-radius-lg: 16px;
  --gm-radius-circle: 50%;
  --gm-shadow-card: 0 2px 12px rgba(104, 83, 75, 0.08);
  --gm-shadow-card-hover: 0 8px 24px rgba(104, 83, 75, 0.16);
  --gm-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--gm-font-body);
  font-size: var(--gm-body-size);
  line-height: var(--gm-body-line);
  color: var(--gm-walnut-text);
  background: var(--gm-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* H1 sans-serif solid (HK Nova alternative) — H2/H3 script Cookie cursive (match LIVE) */
h1 {
  font-family: var(--gm-font-display);
  font-weight: 500;
  color: var(--gm-walnut-text);
  font-size: var(--gm-h1-size);
  line-height: var(--gm-h1-line);
  margin: 0 0 var(--gm-s-3);
}
h2, h3 {
  font-family: var(--gm-font-script);
  font-weight: 500;
  color: var(--gm-walnut-text);
  margin: 0 0 var(--gm-s-3);
}
h2 { font-size: 50px; line-height: 1.2; }
h3 { font-size: 38px; line-height: 1.3; }
/* Modifier .script — pentru titluri cu cursive deep */
h2.script, h3.script, h4.script, h5.script,
.gm-text h2.script, .gm-text h3.script, .gm-text h4.script {
  font-family: var(--gm-font-script);
  font-weight: 500;
  font-style: normal;
}
h4 { font-family: var(--gm-font-body); font-size: var(--gm-h4-size); line-height: var(--gm-h4-line); color: var(--gm-text-muted); font-weight: 400; margin: 0 0 var(--gm-s-3); }
h5 { font-family: var(--gm-font-body); font-size: var(--gm-h5-size); line-height: var(--gm-h5-line); color: var(--gm-walnut-text); font-weight: 500; margin: 0 0 var(--gm-s-2); }

a { color: var(--gm-walnut-text); text-decoration: none; transition: var(--gm-transition); }
a:hover { color: var(--gm-red); }

::selection { background: var(--gm-rose); color: var(--gm-white); }

img { max-width: 100%; height: auto; display: block; }

.container { max-width: var(--gm-container); margin-inline: auto; padding-inline: var(--gm-s-4); }
.container-narrow { max-width: var(--gm-container-narrow); margin-inline: auto; padding-inline: var(--gm-s-4); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--gm-s-2);
  padding: 14px 28px;
  font-family: var(--gm-font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.02em;
  border-radius: var(--gm-radius);
  border: none;
  cursor: pointer;
  transition: var(--gm-transition);
  text-transform: uppercase;
}
.btn-primary { background: var(--gm-red); color: var(--gm-white); }
.btn-primary:hover { background: #d2231a; color: var(--gm-white); }
.btn-secondary { background: var(--gm-green); color: var(--gm-white); }
.btn-secondary:hover { background: #209019; }
.btn-ghost { background: transparent; border: 1px solid currentColor; }