/* ============================================================================
   ASPIER web brand tokens — SINGLE SOURCE OF TRUTH for colour on aspier.app.
   EXTRACTED FROM constants/theme.ts (the RN token set the app consumes).
   Do not hand-edit values here without changing constants/theme.ts first;
   do not define colours in any page — consume these variables.

   RULING (founder, 2026-07-14): ASPIER is racing green + bone. The orange
   direction (the C8602A/E89B3C era — spelled without hash so no tooling parses it) is DEAD BRAND — deprecated, never
   reintroduced. Any non-token colour in shipped CSS/HTML fails the deploy
   brand gate (scripts/web-brand-gate.mjs).

   Permitted beyond these tokens: #000 / #fff as color-mix()/shadow math
   primitives, `transparent`, and alpha variants of the primitives below.
   ========================================================================== */

:root {
  /* -- Brand-anchored primitives (constants/theme.ts, frozen) -------------- */
  --bone:              #EFE9DA;
  --paper:             #F7F2E4;
  --surface-elevated:  #FCF8EC;
  --bone-soft:         #E5DECC;   /* softened bone (theme.ts reduce-bright CTA) */
  --ink-raw:           #16140F;
  --warm-ink:          #221E16;
  --racing-green:      #2C3A28;
  --lifted-green:      #87A37C;
  --lifted-green-deep: #3D5436;
  --burgundy:          #6B2E32;
  --burgundy-lifted:   #C26970;
  --state-trained:     #22C55E;   /* universal completion — semantic */
  --state-missed:      #DC2626;   /* universal failure — semantic */

  /* -- Role tokens, light (theme.ts lightTokens) --------------------------- */
  --bg:          var(--bone);
  --bg-2:        var(--bone-soft);
  --surface:     var(--paper);
  --surface-2:   var(--surface-elevated);
  --ink:         var(--ink-raw);
  --ink-soft:    rgba(22, 20, 15, 0.60);   /* textSecondary */
  --muted:       rgba(22, 20, 15, 0.40);   /* textTertiary */
  --faint:       rgba(22, 20, 15, 0.30);
  --line:        rgba(22, 20, 15, 0.10);   /* border */
  --line-strong: rgba(22, 20, 15, 0.18);   /* borderStrong */
  --line-2:      rgba(22, 20, 15, 0.06);
  --green:       var(--racing-green);      /* brand / CTA */
  --green-2:     var(--lifted-green-deep);
  --sage:        var(--lifted-green);
  --sage-soft:   rgba(135, 163, 124, 0.20);
  --brand-soft:  rgba(44, 58, 40, 0.10);   /* brandSoft */
  --accent-warm:      var(--burgundy);     /* accentWarm — the ONLY warm accent */
  --accent-warm-soft: rgba(107, 46, 50, 0.12);
  --cta-bg:      var(--racing-green);      /* ctaPrimaryBg */
  --cta-text:    var(--bone);              /* ctaPrimaryText */

  --shadow:    0 1px 2px rgba(22,20,15,.04), 0 12px 40px -16px rgba(22,20,15,.18);
  --shadow-sm: 0 1px 2px rgba(22,20,15,.05), 0 4px 16px -8px rgba(22,20,15,.14);
}

/* -- Role tokens, dark (theme.ts darkTokens) — web theme toggle ------------ */
[data-theme="dark"] {
  --bg:          var(--ink-raw);
  --bg-2:        var(--warm-ink);
  --surface:     var(--warm-ink);
  --surface-2:   #2C281F;                   /* surfaceElevated (dark) */
  --ink:         var(--bone);
  --ink-soft:    rgba(239, 233, 218, 0.55);
  --muted:       rgba(239, 233, 218, 0.40);
  --faint:       rgba(239, 233, 218, 0.30);
  --line:        rgba(239, 233, 218, 0.08);
  --line-strong: rgba(239, 233, 218, 0.16);
  --line-2:      rgba(239, 233, 218, 0.05);
  --green:       var(--lifted-green);       /* brand (dark) */
  --green-2:     var(--lifted-green-deep);
  --sage:        var(--lifted-green);
  --sage-soft:   rgba(135, 163, 124, 0.14); /* brandSoft (dark) */
  --brand-soft:  rgba(135, 163, 124, 0.14);
  --accent-warm:      var(--burgundy-lifted);
  --accent-warm-soft: rgba(194, 105, 112, 0.14);
  --cta-bg:      var(--bone);               /* ctaPrimaryBg (dark) */
  --cta-text:    var(--ink-raw);            /* ctaPrimaryText (dark) */

  --shadow:    0 1px 2px rgba(0,0,0,.3), 0 18px 50px -20px rgba(0,0,0,.6);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
}