/* EZO design tokens — values from DESIGN_SYSTEM.md. Single source; no
   component file should hardcode a color/size that belongs here. */

@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/GeistMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/GeistMono-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* Typography */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;

  --fs-display: clamp(2.75rem, 4vw + 2rem, 6rem);
  --fs-h1: clamp(2.25rem, 3vw + 1.5rem, 4.5rem);
  --fs-h2: clamp(2rem, 2vw + 1.25rem, 3rem);
  --fs-h3: clamp(1.5rem, 1vw + 1.25rem, 2rem);
  --fs-h4: 1.375rem;
  --fs-body-lg: 1.3125rem;
  --fs-body: 1.125rem;
  --fs-small: 0.9375rem;
  --fs-caption: 0.8125rem;

  /* Color — light (default) */
  /* Navy scale — dark chrome: header, hero, footer (Jul 2026 re-theme). */
  --navy-100: #E4EAF3; /* pale tint — subtle washes on light surfaces */
  --navy-700: #1C3A63; /* body-text links / eyebrow captions on white */
  --navy-800: #14294D; /* mega-menu panel, hover layers on navy chrome */
  --navy-900: #0A1A33; /* primary navy — header/hero background */
  --navy-950: #050D1A; /* deepest navy — footer background */

  /* Gold scale — primary CTA / accent (replaces emerald, Jul 2026). */
  --gold-100: #FBEAC7; /* tint — icon badges, chip backgrounds */
  --gold-500: #F0A93E; /* primary button fill */
  --gold-600: #C98A24; /* hover / pressed state */
  --gold-700: #B8791E; /* darker gold for on-light decorative icons needing 3:1 */

  /* --accent-* / --highlight-* names are kept stable on purpose: dozens of
     already-built page templates reference var(--accent-600) etc. by name.
     Point them at the new gold scale so every existing component/template
     picks up the re-theme automatically without touching template code.
     Exception: base.css's `a` (body link) color intentionally points at
     --navy-700 directly instead of --accent-600 — gold text on a white
     background reads washed out and risks failing WCAG AA at body-text
     sizes, so plain links/captions on light backgrounds use navy, while
     buttons/badges/icon accents use gold. See base.css + components.css. */
  --accent-100: var(--gold-100);
  --accent-500: #F5C066; /* lighter gold — dark-mode swap target only */
  --accent-600: var(--gold-500);
  --accent-700: var(--gold-600);
  --highlight-500: var(--gold-500);
  --highlight-600: var(--gold-600);
  /* #1D9A6C on white measured 3.56:1 — fails WCAG AA (4.5:1) for both the
     form success message text and the WhatsApp FAB's white-on-fill label
     (contrast is symmetric regardless of fg/bg direction, so it failed
     both usages, not just one). Darkened to 5.18:1, still reads as green. */
  --success-500: #0E7C5B;
  --warning-500: #C4780A;
  --error-500: #D14343;

  --neutral-0: #FFFFFF;
  --neutral-50: #F7F8F9;
  --neutral-100: #EEF0F2;
  --neutral-200: #DFE3E6;
  --neutral-300: #C3CAD0;
  --neutral-400: #98A2AB;
  --neutral-500: #6C7680;
  --neutral-600: #4E5761;
  --neutral-700: #363E47;
  --neutral-800: #20262D;
  --neutral-900: #12161B;
  --neutral-950: #0A0D10;

  --bg: var(--neutral-0);
  --surface: var(--neutral-50);
  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --border: var(--neutral-200);

  /* Link/focus tokens — indirection so prefers-color-scheme: dark (below)
     can swap them for readable values against --bg/--surface. base.css's
     `a`/`a:hover`/:focus-visible read these, not --navy-700/900 directly:
     navy-on-near-black in dark mode would be ~1–1.7:1 contrast, invisible. */
  --link: var(--navy-700);
  --link-hover: var(--navy-900);
  --focus-ring: var(--navy-900);

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

  /* Radius */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
  --radius-xl: 20px; --radius-full: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(10,13,16,.06);
  --shadow-md: 0 4px 12px rgba(10,13,16,.08);
  --shadow-lg: 0 16px 40px rgba(10,13,16,.12);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-micro: 150ms;
  --duration-default: 250ms;
  --duration-reveal: 400ms;

  /* Layout */
  --content-max: 1280px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--neutral-950);
    --surface: var(--neutral-900);
    --text-primary: var(--neutral-50);
    --text-secondary: var(--neutral-300);
    --border: var(--neutral-800);
    --accent-600: var(--accent-500);
    /* navy-700/900 read as near-black-on-black here (~1–1.7:1 against
       --bg/--surface) — swap to a light blue for links and gold for the
       focus ring, both ≥9:1 against neutral-950/900. Header/hero/footer
       stay navy regardless of scheme (set directly, not via --bg), so
       they don't need a dark-mode variant. */
    --link: #8FB4E0;
    --link-hover: var(--gold-500);
    --focus-ring: var(--gold-500);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-micro: 1ms; --duration-default: 1ms; --duration-reveal: 1ms;
  }
}