:root {
  /* WAM Ai brand tokens - v1.0.0 */
  --color-primary: #16181F;          /* Slate Black */
  --color-accent: #19A39B;           /* Persian Turquoise - brand moments */
  --color-positive: #0E8754;         /* Emerald - positive deltas */
  --color-negative: #EF4444;         /* Red - negative deltas */

  --color-text: #16181F;
  --color-text-on-dark: #FFFFFF;
  --color-text-muted: #6E7280;

  --color-bg-light: #FFFFFF;
  --color-bg-dark: #000000;

  --color-border: #E5E7EB;
  --color-surface: #F9FAFB;
  --color-chart-grid: #D9DEE3;

  /* =========================================================
     ROADSIDE FOUNDATION v1.1.0  (added 2026-07)
     Everything below is ADDITIVE. No existing token above was
     changed. Nothing in the app references these names yet, so
     the live site renders identically until we build on them.
     ========================================================= */

  /* --- Semantic color ROLES (fixes the audit's color confusion) --- */
  /* Persian Turquoise (--color-accent) is IDENTITY ONLY from here on:
     logo, wordmark i-dot, hero trim. Never text, never a fill under
     text (it fails contrast at 3.11:1). Everything you TAP uses: */
  --color-interactive:       #0F6660;   /* deep teal — buttons, links, active (AA 6.8:1) */
  --color-interactive-tint:  #E6F5F3;   /* selected / hover wash */

  /* bright brand turquoise for DARK surfaces (bottom-nav active key, the
     dark hero's trim) — formalizes the #2CC4BB the app already used as
     untracked literals (2026-07-16, Canopy phone reskin) */
  --color-accent-on-dark:    #2CC4BB;

  /* the WARNING color the app never had (stale data, alerts, needs-you) */
  --color-warn:              #8A5800;   /* amber TEXT (AA 6.04:1 on white) */
  --color-warn-tint:         #FBEDD2;   /* amber chip / alarm capsule fill */

  /* AA-safe text grades for the semantic colors (the base hexes above
     are for large numerals/icons; these carry small text on tints) */
  --color-positive-text:     #0B7245;   /* small positive text / chips (AA) */
  --color-positive-tint:     #DCF1E3;
  --color-negative-text:     #B42318;   /* small negative text / chips (AA) */
  --color-negative-tint:     #FBE7E0;

  /* warm surfaces (used when we migrate screens to Roadside) */
  --color-paper:             #F5F1E8;   /* warm page background */
  --color-asphalt:           #1C1A17;   /* dark wallet-card hero */

  /* CHART series — never reuse brand or semantic colors */
  --chart-gallons:           #A26A2C;   /* copper bars */
  --chart-line:              #16181F;   /* ink WAM line */
  --chart-alt-1:             #47708E;   /* denim */
  --chart-alt-2:             #7C5876;   /* plum */

  /* --- Roadside LIGHT warm surfaces (2026-07-17). Additive. The warm
     neutrals the Canopy/fuel pages had been restating as literals —
     promoted to tokens per the brand ratchet. --- */
  --color-hairline-warm:     #E4DDCE;   /* warm border/divider on paper */
  --color-ink-warm:          #1E1B16;   /* warm-black primary text */
  --color-muted-warm:        #6B6459;   /* warm secondary text (AA on paper) */

  /* --- Roadside DARK surfaces (Canopy dark twin, 2026-07-16). Additive.
     The warm dark grades the phone dashboard's dark theme maps onto —
     desaturated warm blacks, not inverted colors; every text pair below
     is AA on its surface. --- */
  --color-paper-dark:        #14120F;   /* warm near-black page */
  --color-card-dark:         #1E1B16;   /* raised warm dark card */
  --color-hairline-dark:     #33302A;   /* borders + dividers on dark */
  --color-ink-dark:          #F2EFE9;   /* primary text on dark (13:1) */
  --color-muted-dark:        #A9A29A;   /* secondary text on dark (5.4:1) */
  --color-positive-on-dark:  #34D88A;   /* positive deltas on dark (8:1) */
  --color-negative-on-dark:  #FF6A5A;   /* negative deltas on dark (5.5:1) */
  --color-warn-on-dark:      #E8B15C;   /* warn text/dots on dark (7.5:1) */
  /* chart series, brightened for dark plots */
  --chart-gallons-dark:      #C08340;   /* copper bars on dark */
  --chart-line-dark:         #F2EFE9;   /* paper-white WAM line on dark */
  --chart-alt-1-dark:        #8FB0CC;   /* denim ¢-axis text on dark */

  /* --- Type: one voice for words, one for numbers --- */
  --font-ui:   'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num:  'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fw-regular: 400;
  --fw-medium:  600;
  --fw-bold:    800;
  /* one 8-step scale (replaces 39 ad-hoc sizes) */
  --fs-label:   11px;   /* uppercase micro-labels */
  --fs-small:   13px;   /* table cells, captions */
  --fs-body:    15px;   /* body text */
  --fs-head:    17px;   /* section headers */
  --fs-title:   20px;   /* page titles */
  --fs-metric:  24px;   /* tile numbers */
  --fs-metric2: 34px;   /* secondary big numbers */
  --fs-hero:    56px;   /* the WAM number */

  /* --- Spacing: one 4px scale (replaces 379 ad-hoc values) --- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px;

  /* --- Corners: three radii (replaces 28) --- */
  --radius-control: 12px;   /* buttons, inputs, chips */
  --radius-card:    20px;   /* cards, sheets */
  --radius-pill:    999px;  /* pills, dots */

  /* --- Depth: two shadows (replaces 51) --- */
  --shadow-rest: 0 1px 2px rgba(22,24,31,.05), 0 8px 24px -14px rgba(22,24,31,.12);
  --shadow-lift: 0 20px 48px -16px rgba(22,24,31,.28);
}