/* CDR Roadmap Explorer — design tokens (single source of truth)
   UPTAKE brand identity (logo: raw/uptake_logo.png; site: cdr-uptake.eu).
   Brand hues — pink #e00078, blue #0098e0, green #60b028, orange #f09000,
   grey #989898. Scenario mapping: Fast Lane = orange, Crossroads = blue,
   Long Road = green; pink is the UI accent and is never used for scenarios.
   Each scenario has a *data* hue (lines/fills/swatches) and an *-ink* variant
   (text/chips) that meets 4.5:1 on the theme ground.
   Style every component through these tokens — never hard-code a color. */

:root {
  /* ---- Type families ---- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;

  /* ---- Type scale (root 17px; ~1.25 ratio) ---- */
  --fs-xs: 0.75rem;
  --fs-sm: 0.8235rem;
  --fs-base: 1rem;
  --fs-md: 1.15rem;
  --fs-lg: 1.4rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.2rem;
  --fs-3xl: 2.9rem;
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.6;
  --tracking-label: 0.08em;

  /* ---- Spacing (4px base) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* ---- Radii / borders ---- */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;
  --border-w: 1px;

  /* ---- Layout ---- */
  --measure: 65ch;
  --container: 72rem;
  --container-wide: 84rem;
  --nav-h: 3.75rem;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 180ms;

  /* ================= LIGHT THEME (default) ================= */
  --ground: #fbfbfc;
  --surface: #ffffff;
  --surface-2: #f4f4f6;
  --ink: #1a1a1e;
  --ink-muted: #5a5a63;
  --ink-faint: #8f8f98;          /* echoes the logo grey #989898 */
  --border: #e6e6e9;
  --border-strong: #cfcfd4;

  --brand: #29292e;              /* charcoal — nav emphasis, footer */
  --brand-ink: #f5f5f6;
  --accent: #e00078;             /* UPTAKE pink — links, buttons, focus */
  --accent-hover: #b80063;
  --accent-contrast: #ffffff;
  --accent-soft: rgba(224, 0, 120, 0.08);

  --good: #3a7014;
  --warn: #9a5c00;
  --crit: #c0392b;

  /* Scenario data hues (charts, swatches, borders) */
  --fast-lane: #f09000;
  --crossroads: #0098e0;
  --long-road: #60b028;
  /* Scenario ink variants (text/chips on light ground; all >= 4.5:1) */
  --fast-lane-ink: #9a5c00;
  --crossroads-ink: #0074ab;
  --long-road-ink: #3f7a16;
  --fast-lane-soft: rgba(240, 144, 0, 0.13);
  --crossroads-soft: rgba(0, 152, 224, 0.12);
  --long-road-soft: rgba(96, 176, 40, 0.14);

  --shadow-sm: 0 1px 2px rgba(26, 26, 30, 0.06), 0 1px 3px rgba(26, 26, 30, 0.04);
  --shadow: 0 2px 8px rgba(26, 26, 30, 0.08), 0 8px 24px rgba(26, 26, 30, 0.06);
  --chart-grid: rgba(26, 26, 30, 0.09);
}

/* ================= DARK THEME ================= */
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #101013;
    --surface: #18181c;
    --surface-2: #202026;
    --ink: #ececef;
    --ink-muted: #a2a2ab;
    --ink-faint: #6f6f78;
    --border: #2a2a31;
    --border-strong: #3d3d46;

    --brand: #0c0c0f;
    --brand-ink: #ececef;
    --accent: #ff57ab;
    --accent-hover: #ff7fbe;
    --accent-contrast: #101013;
    --accent-soft: rgba(255, 87, 171, 0.14);

    --good: #7ac74a;
    --warn: #f0a93b;
    --crit: #ef6a5b;

    /* raw brand hues read well on dark ground (5.9–7.9:1) */
    --fast-lane: #f09000;
    --crossroads: #22a7ee;
    --long-road: #6fbe37;
    --fast-lane-ink: #f09000;
    --crossroads-ink: #22a7ee;
    --long-road-ink: #6fbe37;
    --fast-lane-soft: rgba(240, 144, 0, 0.16);
    --crossroads-soft: rgba(34, 167, 238, 0.16);
    --long-road-soft: rgba(111, 190, 55, 0.16);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.45), 0 10px 30px rgba(0, 0, 0, 0.35);
    --chart-grid: rgba(236, 236, 239, 0.1);
  }
}

/* ---- Explicit theme overrides (viewer toggle wins over OS in both directions) ---- */
:root[data-theme="light"] {
  --ground: #fbfbfc; --surface: #ffffff; --surface-2: #f4f4f6;
  --ink: #1a1a1e; --ink-muted: #5a5a63; --ink-faint: #8f8f98;
  --border: #e6e6e9; --border-strong: #cfcfd4;
  --brand: #29292e; --brand-ink: #f5f5f6;
  --accent: #e00078; --accent-hover: #b80063; --accent-contrast: #ffffff; --accent-soft: rgba(224, 0, 120, 0.08);
  --good: #3a7014; --warn: #9a5c00; --crit: #c0392b;
  --fast-lane: #f09000; --crossroads: #0098e0; --long-road: #60b028;
  --fast-lane-ink: #9a5c00; --crossroads-ink: #0074ab; --long-road-ink: #3f7a16;
  --fast-lane-soft: rgba(240, 144, 0, 0.13); --crossroads-soft: rgba(0, 152, 224, 0.12); --long-road-soft: rgba(96, 176, 40, 0.14);
  --shadow-sm: 0 1px 2px rgba(26, 26, 30, 0.06), 0 1px 3px rgba(26, 26, 30, 0.04);
  --shadow: 0 2px 8px rgba(26, 26, 30, 0.08), 0 8px 24px rgba(26, 26, 30, 0.06);
  --chart-grid: rgba(26, 26, 30, 0.09);
}

:root[data-theme="dark"] {
  --ground: #101013; --surface: #18181c; --surface-2: #202026;
  --ink: #ececef; --ink-muted: #a2a2ab; --ink-faint: #6f6f78;
  --border: #2a2a31; --border-strong: #3d3d46;
  --brand: #0c0c0f; --brand-ink: #ececef;
  --accent: #ff57ab; --accent-hover: #ff7fbe; --accent-contrast: #101013; --accent-soft: rgba(255, 87, 171, 0.14);
  --good: #7ac74a; --warn: #f0a93b; --crit: #ef6a5b;
  --fast-lane: #f09000; --crossroads: #22a7ee; --long-road: #6fbe37;
  --fast-lane-ink: #f09000; --crossroads-ink: #22a7ee; --long-road-ink: #6fbe37;
  --fast-lane-soft: rgba(240, 144, 0, 0.16); --crossroads-soft: rgba(34, 167, 238, 0.16); --long-road-soft: rgba(111, 190, 55, 0.16);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.45), 0 10px 30px rgba(0, 0, 0, 0.35);
  --chart-grid: rgba(236, 236, 239, 0.1);
}