/* ==========================================================================
   Design Tokens — the single source of truth for the visual language.
   Every color, size, and timing value used across the site originates here.

   Breakpoint scale (reference only — CSS custom properties cannot be used
   inside @media conditions without a preprocessor, so these are applied as
   literal values in layout.css / components.css media queries):
     640px  – small tablet / large phone
     768px  – tablet
     1024px – laptop
     1280px – desktop
     1440px – wide desktop
   ========================================================================== */

@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/fraunces-variable.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Color: raw palette ----
     Two greens, deliberately: --green-fresh is calibrated to pass 3:1
     against WHITE (icons, large text — see note below). --green-bisleri is
     brighter/more saturated — the "fresh Bisleri green" — but only ever
     paired with dark text on top of it (buttons, badges), verified at
     6.2:1+ against ink, so it can be as vivid as the brand wants without
     ever being used as small text-on-white. */
  --green-deep: #0e4d3c;
  --green-deep-hover: #0a3c2e;
  --green-fresh: #22a35e;
  --green-bisleri: #45b366;
  /* A fresher, more saturated aqua-green tint than a plain pale mint —
     still light enough to host body text and white cards comfortably
     (verified 13:1+ contrast for ink text), but reads as a deliberate
     Bisleri-aqua-green wash rather than a near-white pastel. */
  --green-wash: #c9eee2;
  --aqua: #3fc1c9;
  --aqua-light: #8fe1e6;
  --ink: #16211d;
  --white: #ffffff;
  --mist: #f4f6f5;
  --mist-line: #e3e8e6;
  /* Bisleri yellow, not literal gold: a vivid golden-yellow for the
     "premium accent" role (stat rules, hover rings, decorative details),
     plus a brighter lemon-gold reserved for one signature spot (the hero)
     so the accent has a little range without turning into three
     competing yellows. Both are decorative-only — never used as text or
     a background large enough to need contrast against white (see the
     usage notes at each call site). */
  --gold: #ffc72c;
  --gold-lemon: #ffcb05;
  --gold-wash: #fff6e0;

  /* ---- Color: semantic roles ----
     Sections override these locally (see layout.css) so components that
     reference the semantic tokens automatically adapt to light/muted/dark
     sections without needing their own variants.

     --green-fresh / --green-bisleri are intentionally NOT used as a text
     color at small sizes: even --green-fresh only clears 3:1 (large
     text/icons), not the 4.5:1 small text needs. Everything that IS small
     text routes through the tokens below, contrast-checked against its
     actual background. */
  --color-bg: var(--white);
  --color-bg-raised: var(--mist);
  --color-text: var(--ink);
  --color-text-muted: #4b5a54;
  --color-border: var(--mist-line);
  --color-primary: var(--green-deep);
  --color-primary-hover: var(--green-deep-hover);
  --color-on-primary: var(--white);
  --color-accent: var(--aqua);
  --color-kicker: var(--green-deep);
  --color-kicker-bg: var(--green-wash);
  --color-gold: var(--gold);
  --color-focus-ring: var(--ink);

  /* Button fill is a separate pair from --color-primary: on light sections
     it's the vivid Bisleri green with dark ink text (6.2:1 — verified
     safe), not the deep green used for plain text elsewhere. */
  --color-button-bg: var(--green-bisleri);
  --color-button-text: var(--ink);
  --color-button-hover: #3a9c58;

  /* ---- Typography ---- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-md: 1.125rem;   /* 18px */
  --font-size-lg: 1.375rem;   /* 22px */
  --font-size-xl: 1.75rem;    /* 28px */
  --font-size-2xl: 2.25rem;   /* 36px */
  --font-size-3xl: 2.75rem;   /* 44px */
  --font-size-4xl: 3.5rem;    /* 56px */

  --line-height-tight: 1.2;
  --line-height-snug: 1.35;
  --line-height-normal: 1.6;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Spacing (8px base scale) ---- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */
  --space-9: 6rem;      /* 96px */
  --space-10: 7.5rem;   /* 120px */

  /* ---- Layout ---- */
  --content-max-width: 1280px;
  --content-padding-inline: var(--space-5);

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* ---- Shadow (soft, green-tinted — never neutral black) ---- */
  --shadow-sm: 0 1px 2px rgba(14, 77, 60, 0.06);
  --shadow-md: 0 8px 24px rgba(14, 77, 60, 0.10);
  --shadow-lg: 0 16px 48px rgba(14, 77, 60, 0.14);

  /* ---- Motion ---- */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Z-index ---- */
  --z-header: 100;
  --z-skip-link: 200;
}

/* Dark context override — used by .section--dark (see layout.css): a true
   dark treatment (deep-green bg, white text), kept as the reference "dark
   theme" for the token system (demonstrated on the style guide). No real
   content page uses .section--dark directly. */
.section--dark {
  --color-bg: var(--green-deep);
  --color-bg-raised: #123f32;
  --color-text: var(--white);
  --color-text-muted: #cfe4dc;
  --color-border: rgba(255, 255, 255, 0.16);
  --color-primary: var(--white);
  --color-primary-hover: var(--mist);
  --color-on-primary: var(--green-deep);
  --color-accent: var(--aqua-light);
  --color-kicker: var(--aqua-light);
  --color-kicker-bg: rgba(255, 255, 255, 0.12);
  --color-focus-ring: var(--white);
  --color-button-bg: var(--white);
  --color-button-text: var(--green-deep);
  --color-button-hover: var(--mist);
}

/* .callout: the two greens' roles swapped from the original dark
   treatment — Bisleri green is now the background, deep green is now the
   accent/interactive color (kicker pill, primary button), matching the
   fresher Bisleri identity. This isn't "dark on light" or vice versa in
   the usual sense, so every token here is contrast-checked against the
   Bisleri background specifically, not inherited from .section--dark:
     - ink text vs Bisleri bg: 6.22:1 (white text, used before, was only
       2.66:1 here — that's why --color-text changes to ink, not a
       leftover choice)
     - muted text (#1a2e24) vs Bisleri bg: 5.41:1
     - white button label vs deep-green button fill: 9.79:1
     - deep-green kicker pill vs Bisleri bg (non-text boundary): 3.68:1 */
.callout {
  --color-bg: var(--green-bisleri);
  --color-bg-raised: var(--white);
  --color-text: var(--ink);
  --color-text-muted: #1a2e24;
  --color-border: rgba(14, 77, 60, 0.3);
  --color-primary: var(--ink);
  --color-primary-hover: var(--white);
  --color-on-primary: var(--white);
  --color-accent: var(--green-deep);
  --color-kicker: var(--white);
  --color-kicker-bg: var(--green-deep);
  --color-focus-ring: var(--ink);
  --color-button-bg: var(--green-deep);
  --color-button-text: var(--white);
  --color-button-hover: var(--green-deep-hover);
}

.section--muted {
  /* A pale green wash rather than neutral grey — the alternating-section
     rhythm now carries color instead of just tone. */
  --color-bg: var(--green-wash);
  --color-bg-raised: var(--white);
}