/* ============================================================================
   Delta Carrier Group — Design Tokens
   Two layers (Codex M1-F01):
     LAYER 1 — PRIMITIVES: raw brand/material values. Never used directly by
               components.
     LAYER 2 — SEMANTIC: role tokens mapped from primitives, per theme. Every
               component consumes ONLY semantic tokens (--dcg-surface, --dcg-text,
               --dcg-btn-bg, --dcg-focus, etc.), never a primitive.
   All color pairs are verified by `npm test` (test/validate.mjs) against WCAG
   AA (text >=4.5:1, UI graphics / large text >=3:1). Do not hand-edit a color
   without re-running the harness.
   Direction: "American owner-operator premium." Materials-grounded, cinematic.
   GENERATED from tokens.json v1.5.0 by tools/build-tokens.mjs — do NOT
   hand-edit this file. Edit tokens.json and re-run the generator; the QA
   harness fails on any drift between source and generated output.
   ============================================================================ */

:root {
  /* ========================================================================
     LAYER 1 — PRIMITIVES (do not consume directly in components)
     ========================================================================
  */

  /* neutrals — asphalt (warm charcoal) & bone (warm off-white) */
  --dcg-p-asphalt: #16171A;
  --dcg-p-asphalt-raised: #202227;
  --dcg-p-asphalt-sunk: #101114;
  --dcg-p-asphalt-line: #34383F;   /* DECORATIVE hairline on dark (cards/dividers; not a form-control boundary) */
  --dcg-p-field-line-d: #71767E;   /* form-control border on dark surface — >=3:1 (WCAG 1.4.11) */
  --dcg-p-field-line-l: #767B82;   /* form-control border on light surface — >=3:1 */
  --dcg-p-arrow-d: #AEB4BB;   /* select caret on dark — >=3:1 */
  --dcg-p-arrow-l: #6A6F76;   /* select caret on light — >=3:1 */
  --dcg-p-bone: #F2F1EC;
  --dcg-p-bone-raised: #FBFAF7;
  --dcg-p-bone-sunk: #E7E5DE;
  --dcg-p-line-light: #CFCBC1;   /* border on light — visible hairline */
  --dcg-p-white: #FFFFFF;

  /* brand red — solid fills use the darker ink so white labels pass 4.5:1 */
  --dcg-p-red: #E24854;   /* brand accent — decorative & LARGE text */
  --dcg-p-red-ink: #C2333F;   /* solid fills w/ white text (5.4:1); light-theme accent text */
  --dcg-p-red-ink-hover: #A82833;   /* fill hover (darker = more contrast) */
  --dcg-p-red-bright: #FF5C68;   /* accent TEXT/icon on dark (6.2:1); glow */
  --dcg-p-red-wash: #FBEBEC;

  /* secondary hues */
  --dcg-p-steel: #9AA6B0;
  --dcg-p-steel-dim: #6B747C;
  --dcg-p-amber: #E7A83A;   /* road-paint amber */
  --dcg-p-amber-ink: #8A5A0C;   /* amber text on light (>=4.5) */

  /* text primitives */
  --dcg-p-ink-hi: #F4F3EF;   /* near-white on dark */
  --dcg-p-ink-dim-d: #AEB4BB;   /* dim on dark   (8.6:1) */
  --dcg-p-ink-faint-d: #8C9299;   /* faint on dark (6.1:1)  [was #767C84 fail] */
  --dcg-p-ink-hi-l: #1A1B1E;   /* near-black on light */
  --dcg-p-ink-dim-l: #55585E;   /* dim on light  (6.1:1) */
  --dcg-p-ink-faint-l: #5E6167;   /* faint on light(5.0:1)  [was #83868C fail] */

  /* feedback primitives (theme-specific so each passes on its surface) */
  --dcg-p-ok-d: #6FD69A;
  --dcg-p-ok-l: #226841;
  --dcg-p-warn-d: #E7A83A;
  --dcg-p-warn-l: #8A5A0C;
  --dcg-p-err-d: #FF7A82;
  --dcg-p-err-l: #B02E39;
  --dcg-p-info-d: #7FB4D6;
  --dcg-p-info-l: #2C6285;

  /* focus rings — theme-specific, each >=3:1 vs its surfaces (UI graphic) */
  --dcg-p-focus-d: #FF7A82;
  --dcg-p-focus-l: #C2333F;

  /* (No flat test aliases: the QA harness resolves the real primitive→semantic
     cascade from these definitions + the theme blocks below.)
  */

  /* Global semantic chrome tokens — theme-independent brand surfaces
     (selection, skip-link). Consumed by base.css so no primitive is used
     directly. Fixed to the ink red so white text passes 5.5:1 in either theme.
  */
  --dcg-brand: var(--dcg-p-red-ink);
  --dcg-brand-fg: var(--dcg-p-white);

  /* ========================================================================
     Typefaces & type scale (fluid, clamped)
     ========================================================================
  */
  --dcg-font-display: "Archivo Expanded", "Archivo", "Arial Narrow", system-ui, sans-serif;
  --dcg-font-sans: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --dcg-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --dcg-fs-hero: clamp(2.5rem, 1.4rem + 5.2vw, 6.5rem);
  --dcg-fs-d1: clamp(2.1rem, 1.5rem + 3vw, 4rem);
  --dcg-fs-d2: clamp(1.6rem, 1.25rem + 1.8vw, 2.75rem);
  --dcg-fs-h3: clamp(1.25rem, 1.1rem + 0.8vw, 1.55rem);
  --dcg-fs-h4: 1.125rem;
  --dcg-fs-lead: clamp(1.05rem, 1rem + 0.35vw, 1.28rem);
  --dcg-fs-body: 1rem;
  --dcg-fs-sm: 0.9rem;
  --dcg-fs-xs: 0.8rem;
  --dcg-fs-eyebrow: 0.72rem;

  --dcg-lh-tight: 1.03;
  --dcg-lh-snug: 1.15;
  --dcg-lh-body: 1.6;
  --dcg-tracking-display: -0.02em;
  --dcg-tracking-eyebrow: 0.22em;

  /* ========================================================================
     Spacing / layout / radius / elevation / motion / breakpoints
     ========================================================================
  */
  --dcg-sp-1: 4px;
  --dcg-sp-2: 8px;
  --dcg-sp-3: 12px;
  --dcg-sp-4: 16px;
  --dcg-sp-5: 20px;
  --dcg-sp-6: 24px;
  --dcg-sp-8: 32px;
  --dcg-sp-10: 40px;
  --dcg-sp-12: 48px;
  --dcg-sp-16: 64px;
  --dcg-sp-20: 80px;
  --dcg-sp-24: 96px;
  --dcg-sp-32: 128px;
  --dcg-section-y: clamp(3.5rem, 2.2rem + 5.5vw, 8rem);

  --dcg-container: 1280px;
  --dcg-container-wide: 1440px;
  --dcg-container-text: 68ch;
  --dcg-gutter: clamp(16px, 5vw, 48px);
  --dcg-grid-cols: 12;

  --dcg-radius-sm: 6px;
  --dcg-radius: 12px;
  --dcg-radius-lg: 18px;
  --dcg-radius-xl: 28px;
  --dcg-radius-pill: 999px;

  /* interactive-target floors + control heights (governed dimensions — Codex R4 corr. 13/R5 corr. 13; consumed instead of raw px) */
  --dcg-target-min: 44px;   /* WCAG/project floor for any interactive target */
  --dcg-target: 48px;   /* comfortable default target */
  --dcg-target-lg: 56px;   /* large CTA */
  --dcg-control-min: 50px;   /* text-control height */

  --dcg-shadow-sm: 0 1px 2px rgba(16,17,20,.06), 0 2px 6px rgba(16,17,20,.05);
  --dcg-shadow: 0 4px 12px rgba(16,17,20,.08), 0 12px 32px rgba(16,17,20,.08);
  --dcg-shadow-lg: 0 12px 28px rgba(16,17,20,.12), 0 32px 64px rgba(16,17,20,.14);
  --dcg-shadow-red: 0 8px 30px rgba(194,51,63,.30);

  --dcg-dur-1: 120ms;
  --dcg-dur-2: 220ms;
  --dcg-dur-3: 420ms;
  --dcg-dur-4: 720ms;
  --dcg-ease-out: cubic-bezier(.22,1,.36,1);
  --dcg-ease-inout: cubic-bezier(.65,0,.35,1);
  --dcg-ease-road: cubic-bezier(.16,.84,.28,1);

  /* the Lane (signature) */
  --dcg-lane-w: 2px;
  --dcg-lane-dash: 14px;
  --dcg-lane-gap: 12px;

  /* documented breakpoints (also enforced in media queries):
     sm <=560 · md 561-900 · lg 901-1200 · xl >=1201
  */
  --dcg-bp-sm: 560px;
  --dcg-bp-md: 900px;
  --dcg-bp-lg: 1200px;

  --dcg-z-base: 0;
  --dcg-z-raised: 10;
  --dcg-z-sticky: 100;
  --dcg-z-header: 200;
  --dcg-z-overlay: 800;
  --dcg-z-modal: 900;
  --dcg-z-toast: 1000;
}

/* ==========================================================================
   LAYER 2 — SEMANTIC per theme. Components consume ONLY these.
   ========================================================================== */
.theme-dark {
  --dcg-surface: var(--dcg-p-asphalt);
  --dcg-surface-raised: var(--dcg-p-asphalt-raised);
  --dcg-surface-sunk: var(--dcg-p-asphalt-sunk);
  --dcg-hairline: var(--dcg-p-asphalt-line);
  --dcg-text: var(--dcg-p-ink-hi);
  --dcg-text-dim: var(--dcg-p-ink-dim-d);
  --dcg-text-faint: var(--dcg-p-ink-faint-d);
  --dcg-accent-text: var(--dcg-p-red-bright);
  --dcg-btn-bg: var(--dcg-p-red-ink);
  --dcg-btn-bg-hover: var(--dcg-p-red-ink-hover);
  --dcg-btn-fg: var(--dcg-p-white);
  --dcg-focus: var(--dcg-p-focus-d);
  --dcg-error-text: var(--dcg-p-err-d);
  --dcg-ok-text: var(--dcg-p-ok-d);
  --dcg-warn-text: var(--dcg-p-warn-d);
  --dcg-info-text: var(--dcg-p-info-d);
  --dcg-amber: var(--dcg-p-amber);
  --dcg-star: var(--dcg-p-amber);
  --dcg-field-border: var(--dcg-p-field-line-d);
  --dcg-arrow: var(--dcg-p-arrow-d);
  --dcg-lane-line: var(--dcg-p-asphalt-line);
  --dcg-lane-paint: var(--dcg-p-amber);
  --dcg-scrim: rgba(16,17,20,.6);
  color-scheme: dark;
}

.theme-light {
  --dcg-surface: var(--dcg-p-bone);
  --dcg-surface-raised: var(--dcg-p-bone-raised);
  --dcg-surface-sunk: var(--dcg-p-bone-sunk);
  --dcg-hairline: var(--dcg-p-line-light);
  --dcg-text: var(--dcg-p-ink-hi-l);
  --dcg-text-dim: var(--dcg-p-ink-dim-l);
  --dcg-text-faint: var(--dcg-p-ink-faint-l);
  --dcg-accent-text: var(--dcg-p-red-ink);
  --dcg-btn-bg: var(--dcg-p-red-ink);
  --dcg-btn-bg-hover: var(--dcg-p-red-ink-hover);
  --dcg-btn-fg: var(--dcg-p-white);
  --dcg-focus: var(--dcg-p-focus-l);
  --dcg-error-text: var(--dcg-p-err-l);
  --dcg-ok-text: var(--dcg-p-ok-l);
  --dcg-warn-text: var(--dcg-p-warn-l);
  --dcg-info-text: var(--dcg-p-info-l);
  --dcg-amber: var(--dcg-p-amber-ink);
  --dcg-star: #A9720C;
  --dcg-field-border: var(--dcg-p-field-line-l);
  --dcg-arrow: var(--dcg-p-arrow-l);
  --dcg-lane-line: var(--dcg-p-line-light);
  --dcg-lane-paint: #A9720C;
  --dcg-scrim: rgba(16,17,20,.55);
  color-scheme: light;
}

.ctx-dark {
  --dcg-surface: var(--dcg-p-asphalt);
  --dcg-surface-raised: var(--dcg-p-asphalt-raised);
  --dcg-surface-sunk: var(--dcg-p-asphalt-sunk);
  --dcg-hairline: var(--dcg-p-asphalt-line);
  --dcg-text: var(--dcg-p-ink-hi);
  --dcg-text-dim: var(--dcg-p-ink-dim-d);
  --dcg-text-faint: var(--dcg-p-ink-faint-d);
  --dcg-accent-text: var(--dcg-p-red-bright);
  --dcg-btn-bg: var(--dcg-p-red-ink);
  --dcg-btn-bg-hover: var(--dcg-p-red-ink-hover);
  --dcg-btn-fg: var(--dcg-p-white);
  --dcg-focus: var(--dcg-p-focus-d);
  --dcg-error-text: var(--dcg-p-err-d);
  --dcg-ok-text: var(--dcg-p-ok-d);
  --dcg-warn-text: var(--dcg-p-warn-d);
  --dcg-info-text: var(--dcg-p-info-d);
  --dcg-amber: var(--dcg-p-amber);
  --dcg-star: var(--dcg-p-amber);
  --dcg-field-border: var(--dcg-p-field-line-d);
  --dcg-arrow: var(--dcg-p-arrow-d);
  --dcg-lane-line: var(--dcg-p-asphalt-line);
  --dcg-lane-paint: var(--dcg-p-amber);
}