/* Streetwise design tokens: "Street Grid & Signal". Source of truth: DESIGN.md.
   Every colour in the product (site, app, report, OG images) comes from here (QUALITY-BAR Q12). */
:root, .theme-light {
  color-scheme: light dark;

  /* surfaces */
  --paper: #F4F1EC;         /* warm off-white, printed map paper: every page background */
  --paper-2: #EAE5DC;       /* darker paper for sunk sections and inset cards */
  --ink: #0D1B2A;           /* Asphalt Navy: headings, dark bands, the brand mark */

  /* text */
  --text: #2B2D42;          /* charcoal body text */
  --text-muted: #5B6074;    /* secondary text, captions, axis labels */
  --text-inverse: #F4F1EC;  /* text on ink surfaces */

  /* signal: the one brand hue. Split by job so every use passes WCAG */
  --signal: #007166;        /* text- and button-safe (4.5:1 on paper-2): buttons, links, focus rings, small text */
  --signal-bright: #00A896; /* graphic only: heatmap fills, chart bars, grid accents; never text */
  --signal-dark: #005E54;   /* hover/active, and text on --signal-soft */
  --signal-soft: #D5F0EC;   /* tints: selected rows, badges, notices */
  --card: #FFFFFF;          /* storefront light sections only: cards that lift off the paper */
  --on-signal: #FFFFFF;     /* text on --signal and --alert fills */

  /* alert: out of the top 20, negative comparisons, errors */
  --alert: #A8402A;         /* text- and border-safe (4.5:1 on paper and on --alert-soft) */
  --alert-bright: #E76F51;  /* graphic only: fills */
  --alert-soft: #FBE3DC;    /* tint behind alert text */

  /* lines */
  --line: #D6D0C4;          /* hairline on paper, the street grid */
  --line-strong: #B8B2A5;   /* secondary button border, input border */
  --line-inverse: rgba(244, 241, 236, 0.14); /* hairline on ink surfaces */
  --band: #0D1B2A;          /* storefront dark bands (header, facts, finale, footer); = --ink in light */
  --on-band: #F4F1EC;       /* text on --band, both themes */

  /* heatmap rank bands: data only. Number inside every point in --on-heat; 20+ is a dashed ring, not a fill */
  --heat-top: #00A896;      /* position 1-3 */
  --heat-mid: #7FB8B0;      /* 4-10 */
  --heat-low: #C9A66B;      /* 11-20 */
  --heat-none: #E76F51;     /* not in top 20 (fills: charts, meters); rings and text use --alert */
  --on-heat: #0D1B2A;       /* number on any heat fill; fixed in both themes */

  /* type */
  --font-display: "Space Grotesk", "Neue Haas Grotesk", system-ui, sans-serif; /* h1-h3, display numbers */
  --font: Inter, system-ui, sans-serif;  /* body, UI, tables; numbers get tabular-nums */
  --fs-display: clamp(2.5rem, 5.5vw, 4.5rem);
  --fs-headline: clamp(1.55rem, 2.6vw, 2.1rem);
  --fs-title: 1.25rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-label: 0.78rem;

  /* space */
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 16px;
  --s-lg: 32px;
  --s-xl: 64px;
  --s-xxl: clamp(72px, 10vw, 120px);
  --measure: 66ch;
  --container: 1240px;

  /* shape: mixed on purpose */
  --radius-data: 2px;       /* map sheets, tables, data containers, tags */
  --radius-control: 6px;    /* buttons, inputs */
  --radius-panel: 4px;      /* feature panels, cards */
  --radius-pill: 999px;     /* chips, tab segments */
  --radius-hero: 24px;      /* storefront hero band and the stage panel only (DESIGN.md §4) */

  /* elevation: hairlines, not shadows. One hover lift */
  --shadow-hover: 0 1px 0 rgba(13, 27, 42, 0.04);
  /* storefront depth only (hero CTA, stage, bridge nodes); never in the app or report */
  --shadow-raise: 0 24px 48px -24px rgba(13, 27, 42, 0.28), 0 2px 6px rgba(13, 27, 42, 0.06);
  --shadow-drop: 0 8px 14px rgba(13, 27, 42, 0.12);

  /* motion */
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */
  --dur: 180ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0F1923;
    --paper-2: #17232E;
    --ink: #F4F1EC;
    --text: #D9D5CD;
    --text-muted: #A2A6B2;
    --text-inverse: #0D1B2A;
    --signal: #2CC2AD;
    --signal-dark: #6FD9C9;
    --signal-soft: #123A35;
    --on-signal: #0D1B2A;
    --alert: #F08A70;
    --alert-soft: #3A2019;
    --line: #2A3542;
    --line-strong: #3E4A58;
    --line-inverse: rgba(13, 27, 42, 0.14);
  --band: #070E15;
    --shadow-hover: 0 1px 0 rgba(0, 0, 0, 0.3);
    --shadow-raise: 0 24px 48px -24px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-drop: 0 8px 14px rgba(0, 0, 0, 0.4);
  }
}
:root[data-theme="dark"], .theme-dark {
  --paper: #0F1923;
  --paper-2: #17232E;
  --ink: #F4F1EC;
  --text: #D9D5CD;
  --text-muted: #A2A6B2;
  --text-inverse: #0D1B2A;
  --signal: #2CC2AD;
  --signal-dark: #6FD9C9;
  --signal-soft: #123A35;
  --on-signal: #0D1B2A;
  --alert: #F08A70;
  --alert-soft: #3A2019;
  --line: #2A3542;
  --line-strong: #3E4A58;
  --line-inverse: rgba(13, 27, 42, 0.14);
  --band: #070E15;
  --shadow-hover: 0 1px 0 rgba(0, 0, 0, 0.3);
  --shadow-raise: 0 24px 48px -24px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-drop: 0 8px 14px rgba(0, 0, 0, 0.4);
}

/* storefront night (marketing site only): a lighter slate-navy than the app's dark, so the page reads lifted, not black */
:root[data-theme="dark"].store {
  --paper: #1B2A3D;
  --paper-2: #24364C;
  --line: #3A4B60;
  --line-strong: #4E6078;
  --band: #0F1A27;
}

/* print: white sheet, signal one step darker for toner */
@media print {
  :root { --paper: #FFFFFF; --signal: #005E54; }
}