/* =====================================================================
   Miles2Go — Design Tokens (single source of truth)
   Verbatim from Miles2Go-Branding.md §2 and the approved prototypes
   (miles2go-website-v2.html / miles2go-crm-v2.html).

   VT-1: components reference SEMANTIC tokens (--bg/--surface/--text/--accent…), never raw hex.
   VT-2: brand tokens (--color-primary/secondary/tertiary) are the ONLY place hex appears.
   VT-3: re-skin the whole product by changing the brand token block only.
   ===================================================================== */

:root{
  /* ---- BRAND TOKENS (never change between themes) — Branding §1.2 ---- */
  --color-primary:   #02162A;   /* Miles Navy  — surfaces(dark)/text(light)/sidebar */
  --color-secondary: #074D9A;   /* Go Blue     — buttons, links, focus, CTAs        */
  --color-tertiary:  #3C6DA4;   /* Sky Azure   — accents, charts, dark-theme accent  */
  --color-support:   #0B3361;   /* Midnight    — depth                              */

  /* functional / status colors (Branding §1.2) */
  --color-success: #2E9E5B;     /* active, paid, available */
  --color-warning: #D9952B;     /* pending, maintenance    */
  --color-danger:  #D14338;     /* urgent, failed, overdue */
  --color-info:    var(--color-tertiary);

  /* aliases used by the prototypes' inline styles */
  --success: var(--color-success);
  --warning: var(--color-warning);
  --danger:  var(--color-danger);
  --info:    var(--color-info);

  /* brand ramps (for tints/shades) */
  --secondary-600: #063f7f;
  --secondary-400: #2d6ab5;

  /* feature-checklist checkmark colour (per client reference sample — warm orange).
     NOTE: outside the strict navy/blue palette; isolated to one token so it's a 1-line change.
     Darkened from #E8541F to #C2410C so white-on-orange meets WCAG AA (≥4.5:1) for the glyph. */
  --check: #C2410C;

  /* warm gold — premium CTA / highlight accent (secondary to the blue brand; reference design).
     Used for "Book Now" pill CTAs, section-label pills, and checklist ticks. Dark navy text on gold
     keeps contrast AA. Isolated tokens so it stays a deliberate, easily-tunable accent. */
  --gold:      #E0A92E;
  --gold-2:    #C8861A;
  --gold-deep: #A66C12;
  --on-gold:   #02162A;

  /* type + radius + motion (theme-independent) — Branding §2, §4, §5 */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --radius:      14px;
  --radius-sm:   10px;
  --radius-pill: 40px;
  --pill:        40px;          /* prototype alias for --radius-pill */
  --ease: cubic-bezier(.2,.8,.2,1);
}

/* ---- SEMANTIC TOKENS — LIGHT (default fallback) — Branding §2 ---- */
:root,
[data-theme="light"]{
  --bg:        #F4F6F9;
  --surface:   #FFFFFF;
  --surface-2: #EDF1F6;
  --surface-3: #DFE6EF;
  --text:      #02162A;
  --text-soft: #5A6675;
  --text-dim:  #8A95A4;
  --line:      #DDE4EC;
  --line-2:    #C6D1DD;
  --accent:    var(--color-secondary);
  --on-accent: #FFFFFF;
  --sidebar:   #02162A;
  --shadow: 0 18px 40px -20px rgba(2,22,42,.22);

  /* prototype scene tokens (hero/car stage, grain) */
  --hero-glow: rgba(7,77,154,.10);
  --car-stage: radial-gradient(circle at 50% 60%, #fff, #e4ecf5);
  --grain-blend: multiply;
  --grain-op: .025;
}

/* ---- SEMANTIC TOKENS — DARK — Branding §2 ---- */
[data-theme="dark"]{
  --bg:        #060B14;
  --surface:   #0C1421;
  --surface-2: #121C2E;
  --surface-3: #1A2740;
  --text:      #EAF0F8;
  --text-soft: #9FB0C4;
  --text-dim:  #6B7B90;
  --line:      rgba(60,109,164,.20);
  --line-2:    rgba(60,109,164,.34);
  --accent:    var(--color-tertiary);   /* brighter blue reads better on dark */
  --on-accent: #03101F;
  --sidebar:   #02101F;
  --shadow: 0 22px 50px -22px rgba(0,0,0,.7);

  --hero-glow: rgba(60,109,164,.12);
  --car-stage: radial-gradient(circle at 50% 60%, #16233a, #070d17);
  --grain-blend: overlay;
  --grain-op: .04;
}