/* ==========================================================================
   Web MDT — Design Tokens (single source of truth for theme values)
   --------------------------------------------------------------------------
   THIS IS THE FILE CLAUDE DESIGN EDITS. Change the *values* here; do not
   reintroduce hardcoded literals (#hex, px, font names) into style.css.

   Palette: cream canvas + near-black ink, dark editorial sections, a single
   yellow brand accent, mono labels in JetBrains Mono.

   WCAG AA floors (engineering-owned, non-negotiable):
     • Body/heading text on a surface must meet ≥ 4.5:1 (≥ 3:1 for large text).
     • UI / focus indicators must meet ≥ 3:1.

   ⚠ THE YELLOW: --color-brand (#f6c500) is ~1.4:1 on cream → it FAILS as text
     on a light background. Use it as a BACKGROUND (with --color-ink-strong text,
     ~13:1) or as text ONLY on the dark sections. For yellow-toned TEXT on a
     light surface use --color-gold (#a08400, AA-passing). This is already wired:
     light-section eyebrow labels use --color-gold; dark-section labels use the
     full --color-brand.
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --color-brand: #f6c500;            /* primary yellow — backgrounds, dark-bg text, accents */
  --color-gold: #a08400;             /* AA-safe yellow for TEXT on light surfaces (eyebrow labels) */

  /* --- Ink (text on light) --------------------------------------------- */
  --color-ink: #45454d;              /* default body */
  --color-ink-strong: #15151a;       /* headings / strong (also the near-black UI fill) */
  --color-ink-muted: #5a5a62;        /* secondary paragraph text */
  --color-ink-subtle: #76767e;       /* nav (resting), stat labels */
  --color-card-num: #c9c6bd;         /* faint index numerals on cards */

  /* --- Surfaces (light) ------------------------------------------------- */
  --color-bg: #f4f2ec;               /* cream page canvas */
  --color-surface: #fff;             /* cards, About panel */
  --color-nav-active-bg: rgba(246, 197, 0, .18); /* active nav pill / hover */

  /* --- Dark sections ---------------------------------------------------- */
  --color-dark: #131316;             /* hero / clients / footer canvas */
  --color-dark-2: #15151a;           /* dark callout card, CTA button, near-black */
  --color-dark-3: #1c1c21;           /* inset chips (browser badge, image-slot) */
  --color-stage: #0c0c0e;            /* hero image-stage backdrop */

  /* --- Text/lines on dark ---------------------------------------------- */
  --color-on-dark: #fff;
  --color-on-dark-85: rgba(255, 255, 255, .85); /* hover-bright */
  --color-on-dark-72: rgba(255, 255, 255, .72); /* captions, body on dark */
  --color-on-dark-66: rgba(255, 255, 255, .66); /* hero intro */
  --color-on-dark-60: rgba(255, 255, 255, .60); /* inactive tab label */
  --color-on-dark-55: rgba(255, 255, 255, .55); /* footer description */
  --color-on-dark-45: rgba(255, 255, 255, .45); /* footer meta, scroll cue */
  --color-on-dark-40: rgba(255, 255, 255, .40); /* tab numerals */
  --hairline-dark: rgba(255, 255, 255, .12);    /* dividers on dark */

  /* --- Lines on light --------------------------------------------------- */
  --hairline: rgba(0, 0, 0, .08);    /* card borders, header bottom */
  --hairline-soft: rgba(0, 0, 0, .06);
  --hairline-strong: rgba(0, 0, 0, .14); /* card border on hover */

  /* --- Duotone treatment (hero/about imagery) -------------------------- */
  --duotone-navy: #1d2a55;           /* color-blend tint over grayscale photos */

  /* --- Typography ------------------------------------------------------- */
  --font-base: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --line-tight: 1.05;
  --line-snug: 1.1;
  --line-body: 1.6;
  --line-relaxed: 1.7;

  /* --- Spacing ---------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3.5rem;
  --space-10: 6rem;                  /* section vertical rhythm */

  /* --- Radius ----------------------------------------------------------- */
  --radius-sm: 6px;                  /* nav pills */
  --radius: 10px;                    /* buttons */
  --radius-md: 12px;                 /* logo tiles */
  --radius-lg: 14px;                 /* cards */
  --radius-xl: 16px;                 /* hero stage */
  --radius-pill: 50%;

  /* --- Motion ----------------------------------------------------------- */
  --transition-fast: .2s ease;
  --transition: .3s ease;
  --transition-slow: .35s ease;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  /* Non-essential motion is gated behind @media (prefers-reduced-motion: reduce) in style.css. */

  /* --- Elevation -------------------------------------------------------- */
  --shadow-header: 0 6px 24px -12px rgba(0, 0, 0, .25);
  --shadow-stage: 0 40px 90px -30px rgba(0, 0, 0, .7);
  --shadow-card-hover: 0 24px 50px -24px rgba(0, 0, 0, .28);
  --shadow-cta: 0 16px 40px -10px rgba(21, 21, 26, .5);
  --shadow-brand: 0 8px 20px rgba(246, 197, 0, .4);

  /* --- Focus ------------------------------------------------------------ */
  --color-focus: #1d6fff;            /* :focus-visible ring — ≥3:1 on cream & dark; not the low-contrast yellow */

  /* --- Layout ----------------------------------------------------------- */
  --container: 1240px;
  --container-wide: 1320px;          /* About split */
  --gutter: 32px;
  --header-h: 74px;
  --z-header: 99;
}

/* Client-logo tile backgrounds (Pepsi #0065c3, JetBlue #00205b, SoccerZone #000,
   white panels) are the CLIENTS' brand colors — set per-tile in style.css via
   .logo-tile--<brand> modifiers, intentionally not part of the Web MDT theme. */