/* ============================================================================
   AfterShow — Canonical theme tokens (light + dark)
   ----------------------------------------------------------------------------
   Single source of truth for every color/elevation token used across the site.
   Linked by every page as <link rel="stylesheet" href="/theme.css"> in <head>,
   BEFORE each page's own inline <style> so a page can still override a token
   locally if it ever needs to.

   HOW THEMING WORKS
   -----------------
   - :root          = light theme (the default).
   - html[data-theme="dark"] = dark overrides. Set on <html> by /theme.js before
                      first paint. Because every page rule references var(--token),
                      flipping the attribute reskins the whole site automatically.
   - Brand colors (--green / --accent / platform colors) intentionally stay vivid
     in dark; only surfaces, text, borders, neutrals, grids and shadows change.

   EDITING
   -------
   Change a value here once and it propagates to every page. Per-page non-color
   tokens (e.g. --sidebar-w) stay in that page's own :root, not here.
   ============================================================================ */

:root {
  /* ---- Surfaces ---- */
  --bg: #faf9f6;            /* page background */
  --bg2: #f2f0ea;           /* secondary fill: tracks, segmented controls, th */
  --bg3: #e8e4da;           /* tertiary fill (a few marketing pages) */
  --surface: #ffffff;       /* cards, sidebar, modals, inputs */

  /* ---- Brand greens ---- */
  --green: #3B6D11;         /* primary brand fill: bars, buttons, dots, focus */
  --green-mid: #4e8a18;     /* hover / mid stop */
  --green-light: #eaf3de;   /* tint bg: active nav, badges, panels */
  --green-pale: #f4f9ed;    /* faintest brand wash */
  --accent: #639922;        /* secondary brand accent */
  --teal: #0F6E56;
  --brand: var(--green);    /* alias some pages use */
  /* --green-text: brand green when used as TEXT or a small accent (nav-active,
     tabs, links, badges, titles, table-sort, up-trends). Equal to --green in
     light; brightens in dark so it stays legible on dark surfaces while --green
     itself stays saturated for fills. ALWAYS use this for green text. */
  --green-text: #3B6D11;

  /* ---- Status / accent ---- */
  --blue: #185FA5;   --blue-bg: #e6f1fb;
  --amber: #854F0B;  --amber-bg: #faeeda;
  --red: #993C1D;    --red-bg: #faece7;

  /* ---- Text ---- */
  --text: #1a1a18;          /* primary */
  --text-2: #4a4a44;        /* secondary */
  --text-3: #888880;        /* muted / labels */

  /* ---- Borders / dividers ---- */
  --border: rgba(0,0,0,0.09);
  --border-mid: rgba(0,0,0,0.15);
  --input-border: var(--border);
  /* Brand-tint borders on green/amber panels (kept legible per theme). */
  --green-border: rgba(59,109,17,0.2);
  --green-border-soft: rgba(59,109,17,0.1);
  --green-border-strong: rgba(59,109,17,0.3);
  --amber-border: rgba(217,119,6,0.2);

  /* ---- On-color text ---- */
  --on-accent: #ffffff;     /* text/icons on a saturated brand fill */
  --surface-blur: rgba(250,249,246,0.92);  /* frosted sticky nav/header bg */

  /* ---- Data-viz neutrals (charts, maps) ---- */
  --chart-neutral: #e2dfd6;   /* "empty"/one-time/zero swatch, gradient start */
  --chart-grid: rgba(0,0,0,0.05);
  --chart-tick: #888880;      /* axis tick labels (mirrors --text-3) */
  --map-label-strong: #1a1a18;
  --map-label-zero: #aaaaaa;
  --map-stroke: #ffffff;      /* stroke between cartogram tiles (= page bg) */

  /* ---- Callout (e.g. fee-rate alert) ---- */
  --callout-text: #993C1D;
  --callout-bg: #fbeae5;
  --callout-border: rgba(153,60,29,0.2);

  /* ---- Elevation (softened, not hue-flipped, in dark) ---- */
  --shadow-sm: rgba(0,0,0,0.1);
  --shadow-md: rgba(0,0,0,0.18);
  --shadow-lg: rgba(0,0,0,0.25);
  --overlay: rgba(26,26,24,0.45);   /* modal scrim */

  /* ---- Bespoke aliases (legacy variable names on a few internal/admin pages
     and the winback page). Mapped here so those pages inherit the canonical
     palette — and dark mode — without rewriting their rules. New code should
     NOT use these names; they exist only for back-compat. ---- */
  --cream: var(--bg);
  --ink: var(--text);
  --mute: var(--text-3);
  --muted: var(--text-3);
  --line: var(--border);
  --green-soft: var(--green-light);
  --amber-soft: var(--amber-bg);
  --red-soft: var(--red-bg);

  /* ---- Type (theme-independent; no dark variant needed) ----
     Figtree is the headline face; DM Sans is the body/UI face. Swapped in from
     Playfair across the app via find/replace of 'Playfair Display', serif. */
  --font-display: 'Figtree', system-ui, -apple-system, sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  /* ---- Optional radius primitives (match what's already on screen) ---- */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;

  /* ---- Semantic data roles (distinct from brand green) ----
     Green stays brand/positive chrome; these give the data layer its own roles
     so meaning stops blurring. Light values here; dark overrides below. */
  --data-positive: #1f9d57;   /* emerald: up / good / goal met */
  --data-negative: #c63d20;   /* brick: down / bad / goal missed */
  --data-warning:  #b8740a;   /* amber: cost / attention */

  /* ---- Categorical ramp: 6 mutually-distinct hues, harmonized to cream/forest.
     Use in order; each varies in hue AND lightness for separability. ---- */
  --cat-1: #3B6D11;   /* forest */
  --cat-2: #0F6E56;   /* teal   */
  --cat-3: #C77D1A;   /* ochre  */
  --cat-4: #A8432A;   /* clay   */
  --cat-5: #3E6CA8;   /* slate  */
  --cat-6: #7A3F63;   /* plum   */

  /* ---- Convenience aliases for the recurring 2-series charts ---- */
  --series-returning: var(--cat-1);
  --series-new:       var(--cat-3);
  --series-line:      var(--cat-5);
}

/* ============================================================================
   DARK THEME
   Overrides only the tokens that must change. Surface family matches the proven
   embed-dark palette used on the public seller card.
   ============================================================================ */
html[data-theme="dark"] {
  color-scheme: dark;       /* native controls, scrollbars, form widgets */

  /* Surfaces */
  --bg: #14180f;
  --bg2: #1c2117;
  --bg3: #232a1c;
  --surface: #1e231a;

  /* Greens: fills stay vivid; tints + green-text adapt */
  --green-light: #2a331f;
  --green-pale: #20281a;
  --green-text: #8cc63f;    /* brightened for legibility on dark */

  /* Status */
  --blue: #6ea8ff;   --blue-bg: #1a2740;
  --amber: #e0a44a;  --amber-bg: #2e2410;
  --red: #e88b6a;    --red-bg: #2a1a14;

  /* Text */
  --text: #f3f1ea;
  --text-2: #c2c8ba;
  --text-3: #8b9183;

  /* Borders */
  --border: rgba(255,255,255,0.10);
  --border-mid: rgba(255,255,255,0.16);
  --green-border: rgba(138,191,86,0.22);
  --green-border-soft: rgba(138,191,86,0.12);
  --green-border-strong: rgba(138,191,86,0.32);
  --amber-border: rgba(224,164,74,0.22);

  /* Data-viz neutrals */
  --chart-neutral: #3a4031;
  --chart-grid: rgba(255,255,255,0.07);
  --chart-tick: #8b9183;
  --map-label-strong: #f3f1ea;
  --map-label-zero: #5d6354;
  --map-stroke: #14180f;

  /* Callout */
  --callout-text: #e0a44a;
  --callout-bg: #2e2410;
  --callout-border: rgba(224,164,74,0.25);

  --surface-blur: rgba(20,24,15,0.92);  /* frosted nav on dark */

  /* Elevation: deeper, since shadows on dark need more presence */
  --shadow-sm: rgba(0,0,0,0.4);
  --shadow-md: rgba(0,0,0,0.5);
  --shadow-lg: rgba(0,0,0,0.6);
  --overlay: rgba(0,0,0,0.6);

  /* Bespoke aliases re-point automatically via the var() chain above, except
     where a legacy page hardcoded a DIFFERENT green (admin_import-diagnostics
     used #2d6a4f). Normalize it to the brand green in dark too. */
  --green-soft: var(--green-light);

  /* ---- Data-viz: brighter, slightly desaturated to hold contrast on dark.
     (Type + radius tokens above are theme-independent, so not repeated here.)
     The --series-* aliases re-point automatically via the var() chain. ---- */
  --data-positive: #4cc585;
  --data-negative: #e8765a;
  --data-warning:  #e0a44a;

  --cat-1: #7cb53f;   /* forest (brightened) */
  --cat-2: #2faE93;   /* teal   */
  --cat-3: #df9b3e;   /* ochre  */
  --cat-4: #d2734f;   /* clay   */
  --cat-5: #6ea0db;   /* slate  */
  --cat-6: #b878a0;   /* plum   */
}

/* Respect users who ask the OS to reduce contrast/animation is out of scope
   here; theme.js handles prefers-color-scheme. */