/* NatGas Central · Night Desk design tokens (A1-04; port of proto/css/tokens.css, round 5, 2 Oct 2026).
   :root is the DARK SITE. The site paints its own ground and ignores the viewer's OS theme.
   The light report tokens apply under [data-report-theme="light"] and on the daily report's html[data-theme="light"]
   (the live report keeps the reader's saved choice in localStorage.ngc_theme), and on paper (@media print, every page except
   the generator's PDF render, html.ngc-pdf, which keeps the theme it was asked for).
   Every colour on the site comes from these variables: components and pages read them and never redefine them.
   Canonical copy: child-theme/assets/css/ngc-tokens.css; synced byte-for-byte into ngc_web/static/shared/ by
   backup/automation/tools/sync_web_assets.py (never edit the synced copy). */

:root {
  color-scheme: dark;

  /* ground and surfaces */
  --ground: #0B0D10;
  --surface: #111418;
  --raised: #181C21;
  --hair-soft: #1C2026;
  --hair: #242830;
  --line: #2E333B;
  --grid: #1E2228;
  --control: #5E6570;

  /* text */
  --t1: #E7E9EC;
  --t2: #AAB1BB;
  --t3: #858D98;
  --reading: #CDD2D8;          /* serif long reads only */

  /* brand and interaction */
  --brand: #3B82F6;
  --accent: #60A5FA;
  --accent-hover: #93C5FD;
  --fill: #2563EB;
  --fill-hover: #1D4ED8;
  --on-fill: #FFFFFF;
  --accent-quiet: #16253B;
  --focus: #93C5FD;

  /* meaning: price and calls (up/down), status (ok/danger), degree days (warm/cold) */
  --up: #70C696;
  --down: #E6867A;
  --ok: #70C696;
  --danger: #E6867A;
  --warn: #E5955D;             /* round 3: "small change" build chip + running-late tone (same hex as warm) */
  --warm: #E5955D;
  --cold: #70BED8;
  --dd-warm: #E5955D;
  --dd-cold: #70BED8;

  /* chart series (fixed per measure: supply S1, demand S3, power burn S2 ...) */
  --neutral-bar: #5E6570;
  --cmp1: #7D8590;
  --cmp2: #646B76;
  --s1: #3B82F6;
  --s2: #B25E98;
  --s3: #BD8846;
  --s4: #169D97;
  --band-color: #858D98;
  --band-opacity: 0.12;
  --hatch-color: #858D98;
  --hatch-opacity: 0.45;
  --mark-fill-opacity: 0.80;
  --surplus-opacity: 0.30;

  /* round 4: the dotted "normal" on charts (work4/normals.md) — never used for data */
  --ref: #E6DFCF;
  --ref-caption: #AAB1BB;
  --ref-halo: #111418;
  --ref-above-opacity: 0.18;
  /* round 4: outlook widget zone tints (opacity of --down / --t3 / --up on a separate element; no color-mix) */
  --ow-zone-dir: 0.30;
  --ow-zone-neu: 0.30;
  --ow-plot-dir: 0.07;
  --ow-plot-neu: 0.08;

  --shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  --scrim: rgba(5, 7, 9, 0.72);

  /* type */
  --sans: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;

  /* radius */
  --r-xs: 3px;
  --r-sm: 4px;
  --r: 6px;
  --r-pill: 999px;

  /* spacing scale (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 56px;
  --sp-11: 64px;
  --sp-12: 88px;
  --sp-13: 112px;

  /* layout */
  --content-max: 1280px;
  --report-max: 1120px;
  --reading-max: 680px;
  --gutter: 80px;
  --strip-h: 36px;
  --nav-h: 64px;
  --touch: 44px;
  --ngc-bottom-bar: 0px;       /* a page with a sticky bottom bar (Home's phone "Sample · Plans" bar) sets this on :root so toasts sit above it */

}

@media (min-width: 700px) and (max-width: 1099px) {
  :root { --gutter: 32px; }
}
@media (max-width: 699px) {
  :root { --gutter: 16px; --strip-h: 44px; --nav-h: 60px; }
}

/* Light report theme (report page only). Same token names; print grid used for paper. */
[data-report-theme="light"], html[data-theme="light"] {
  color-scheme: light;
  --ground: #F6F7F8;
  --surface: #FFFFFF;
  --raised: #EEF0F2;
  --hair-soft: #ECEEF1;
  --hair: #E1E4E8;
  --line: #D3D7DC;
  --grid: #ECEEF1;
  --control: #868E98;
  --t1: #111418;
  --t2: #48505A;
  --t3: #5E6670;
  --reading: #111418;
  --brand: #2563EB;
  --accent: #1D4ED8;
  --accent-hover: #1E40AF;
  --fill: #2563EB;
  --fill-hover: #1D4ED8;
  --on-fill: #FFFFFF;
  --accent-quiet: #E8EFFD;
  --focus: #1D4ED8;
  --up: #1B7348;
  --down: #AE3F31;
  --ok: #1B7348;
  --danger: #AE3F31;
  --warn: #9E5217;
  --warm: #9E5217;
  --cold: #1A6E8A;
  --dd-warm: #D4712A;
  --dd-cold: #2E8FB8;
  --neutral-bar: #868E98;
  --cmp1: #6B737E;
  --cmp2: #868E98;
  --s1: #2563EB;
  --s2: #A54C8B;
  --s3: #B87A2B;
  --s4: #008E88;
  --band-color: #5E6670;
  --band-opacity: 0.10;
  --hatch-color: #5E6670;
  --hatch-opacity: 0.45;
  --mark-fill-opacity: 1;
  --surplus-opacity: 0.30;
  --ref: #3D372D;
  --ref-caption: #5E6670;
  --ref-halo: #FFFFFF;
  --ref-above-opacity: 0.14;
  --ow-zone-dir: 0.20;
  --ow-zone-neu: 0.22;
  --ow-plot-dir: 0.06;
  --ow-plot-neu: 0.07;
  --shadow: 0 12px 32px rgba(17, 20, 24, 0.12);
  --scrim: rgba(17, 20, 24, 0.45);
}

/* round 5 (SPEC5 C11, wide.md 14): paper always gets the light report tokens (a copy of the block above), on every page.
   Paper only: not on html.ngc-pdf, the generator's PDF render (BUILD_SPEC §4.7). Chromium applies print media inside page.pdf(),
   and the dark PDF must stay dark; the light PDF is light through html[data-theme="light"] above. The :where() guard adds no
   specificity, so on paper these rules weigh exactly what :root and [data-report-theme] did. */
@media print {
  :root:where(:not(.ngc-pdf)), :where(html:not(.ngc-pdf)) [data-report-theme] {
  color-scheme: light;
  --ground: #F6F7F8;
  --surface: #FFFFFF;
  --raised: #EEF0F2;
  --hair-soft: #ECEEF1;
  --hair: #E1E4E8;
  --line: #D3D7DC;
  --grid: #ECEEF1;
  --control: #868E98;
  --t1: #111418;
  --t2: #48505A;
  --t3: #5E6670;
  --reading: #111418;
  --brand: #2563EB;
  --accent: #1D4ED8;
  --accent-hover: #1E40AF;
  --fill: #2563EB;
  --fill-hover: #1D4ED8;
  --on-fill: #FFFFFF;
  --accent-quiet: #E8EFFD;
  --focus: #1D4ED8;
  --up: #1B7348;
  --down: #AE3F31;
  --ok: #1B7348;
  --danger: #AE3F31;
  --warn: #9E5217;
  --warm: #9E5217;
  --cold: #1A6E8A;
  --dd-warm: #D4712A;
  --dd-cold: #2E8FB8;
  --neutral-bar: #868E98;
  --cmp1: #6B737E;
  --cmp2: #868E98;
  --s1: #2563EB;
  --s2: #A54C8B;
  --s3: #B87A2B;
  --s4: #008E88;
  --band-color: #5E6670;
  --band-opacity: 0.10;
  --hatch-color: #5E6670;
  --hatch-opacity: 0.45;
  --mark-fill-opacity: 1;
  --surplus-opacity: 0.30;
  --ref: #3D372D;
  --ref-caption: #5E6670;
  --ref-halo: #FFFFFF;
  --ref-above-opacity: 0.14;
  --ow-zone-dir: 0.20;
  --ow-zone-neu: 0.22;
  --ow-plot-dir: 0.06;
  --ow-plot-neu: 0.07;
  --shadow: 0 12px 32px rgba(17, 20, 24, 0.12);
  --scrim: rgba(17, 20, 24, 0.45);
  }
}