/* Design tokens — colors, shape, shadows.
   Consumed by base.css, components/*.css, and page stylesheets.
   A frontend team porting this to a theme system (Tailwind config,
   CSS-in-JS, etc.) maps each variable below to its own token. */

:root {
  /* Color — surface */
  --bg-1: #0f1b33;
  --bg-2: #0b1530;                  /* page ground bottom, recessed wells, chart tooltips */

  /* Color — accent */
  --gold: #f4b000;

  /* Shape */
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 25px 80px var(--shadow-soft), 0 2px 0 var(--fill-1) inset;

  /* Sidebar + layout */
  --shadow-sidebar: 4px 0 24px var(--shadow-soft);
  --sidebar-width: 250px;
  --sidebar-collapsed-width: 82px;
  --header-h: 88px;
  --transition-sidebar: 0.22s cubic-bezier(0.4, 0, 0.2, 1);

  /* Type steps used by sidebar */
  --font-size-xs: 10px;
  --font-size-sm: 12px;

  /* Colour set: one value per role, all at a similar strength on the navy
     background. Gold (--gold) is the brand colour; see the gold-role rule. */
  --color-text: #eef1f5;
  --color-text-strong: #ffffff;   /* full-contrast figures and markers (Financials) */
  --color-text-secondary: rgba(238, 241, 245, 0.86);
  --color-text-disabled: rgba(238, 241, 245, 0.40);
  --color-negative: #e8736d;
  --color-positive: #4fc493;
  --color-orange: #ef9a55;
  --color-blue: #62a8e8;
  --color-purple: #a591e6;
  --color-yellow: #e7c255;   /* Solar: data, so not the brand gold */
  /* Lighter steps of blue / purple / teal for figures set in a data colour
     (Positions daily table cost columns), so small text reads on navy. */
  --color-blue-text: #8cc4f5;
  --color-purple-text: #c4b5f7;   /* also the lowest call strike */
  --color-teal-text: #7fd8d0;     /* also the Gas Hedges HSC market line */
  --color-negative-text: #f4a7a2;  /* lighter red for labels (sell trades) */

  /* Surfaces: the only background fills. Anything in between is one of these with
     a white or blue rgba() overlay on top (never a new hex). */
  --surface-deep: #091123;          /* sidebar, login backdrop, darkest ground */
  --surface-card: #101c3a;          /* cards, panels, table bodies, open menus */
  --surface-head: #14254a;          /* table header rows, sticky headers */
  --surface-control: #25344e;       /* filled buttons (Demo Mode, Send Invite) */
  --surface-control-hover: #30415e;
  --surface-hero-button: #ffffff;   /* logout on the hero, which stays dark in both themes */

  /* Overlays: the only translucent lines and fills laid over a surface. Pick by
     strength, never a new rgba(); a light theme redefines each step. */
  --line-1: rgba(255, 255, 255, 0.06);   /* row dividers, quiet hairlines */
  --line-2: rgba(255, 255, 255, 0.10);   /* card, control and panel borders */
  --line-3: rgba(255, 255, 255, 0.16);   /* emphasised borders, scrollbar thumbs */
  --line-4: rgba(255, 255, 255, 0.24);   /* hover and focus borders, chart crosshairs */
  --line-5: rgba(255, 255, 255, 0.34);   /* chart zero and reference lines */
  --fill-1: rgba(255, 255, 255, 0.03);   /* row hover, nested rows */
  --fill-2: rgba(255, 255, 255, 0.06);   /* quiet buttons, wells, in-range cells */
  --fill-3: rgba(255, 255, 255, 0.10);   /* button hover */
  --fill-4: rgba(255, 255, 255, 0.16);   /* pressed, neutral tags */
  --fill-range: rgba(255, 255, 255, 0.06); /* chart range bands (Gas Storage 5-yr range) */
  --mask-opaque: #000000;                /* mask-image shapes: only the alpha counts, never themed */
  --fill-sunken: rgba(0, 0, 0, 0.18);    /* recessed text fields, switch tracks, pressed fills */

  /* Shadows: the only black under a surface. Soft under cards and bars, strong
     under anything that floats (menus, popovers, drawers). */
  --shadow-soft: rgba(0, 0, 0, 0.30);
  --shadow-strong: rgba(0, 0, 0, 0.50);
  --label-halo: rgba(0, 0, 0, 0.50);     /* outline that keeps white chart labels sharp on mid-tone cells */
  --scrim: rgba(0, 0, 0, 0.50);          /* page dim behind the mobile sidebar */

  /* Sign-in pages: the photo, its tagline and the gold button look the same in
     both themes, so these are never redefined for light. */
  --stage-ink: #091123;                  /* ground under the photo, label on the gold button */
  --stage-text: #eef1f5;                 /* the tagline and theme switch on the photo */
  --stage-shadow: rgba(0, 0, 0, 0.60);   /* the card floating on the photo */
  --brand-gold: #f4b000;                 /* the sign-in button and a ticked box, in both themes */
  --brand-gold-hover: #f5b81a;
  --brand-gold-press: #d89d04;

  /* Extended data palette, for charts that need more series than the core set
     above (ERCOT locations, Portfolio suppliers/contracts, cost breakdowns).
     Muted to sit with the core colours on navy; use in this order. */
  --data-steel: #6b9bd1;
  --data-amber: #e0a458;
  --data-rose: #cf8592;
  --data-sage: #7fb08a;
  --data-clay: #d1996a;
  --data-violet: #9a8fc7;
  --data-teal: #5bb3ad;
  /* Call options, lowest strike first: one purple family, the further-out
     strike deeper (ERCOT Prices Call Strikes panel and table, Load vs Hedge bands).
     The lowest strike is --color-purple-text (#c4b5f7). */
  --data-call-high: #7b5ce0;
  --data-call-high-text: #b3a1f3;   /* the $200 colour lifted for figures set in it on navy */
  --data-orchid: #b98fc0;
  --data-slate: #8ba3c4;
  --data-sky: #6fb8c9;
  --data-olive: #9fb673;
  --data-sand: #b6a86a;
  --data-blush: #d0a0b0;
  /* Mid-Term Forecast's main (Weather) forecast: the text white in dark, a softer
     grey than text in light so the line doesn't read as black. */
  --data-forecast: #eef1f5;

  /* Categorical set for stacked categories that must be told apart at a glance
     (Gas Hedges layers). Stronger than the muted set above, which fails the
     colour-blind and normal-vision separation checks when stacked; validated as
     a set on --surface-card. Use in this order; past four, fold into one neutral. */
  --data-layer-blue: #3987e5;
  --data-layer-aqua: #199e70;
  --data-layer-violet: #9085e9;
  --data-layer-magenta: #d55181;

  /* Ember: the sequential ramp for a load-only heatmap (Load Forecast), from
     just above --surface-card to the Load orange family; white labels on every step. */
  --data-heat-ember-low: #2a2f4d;
  --data-heat-ember-mid: #6b4a49;
  --data-heat-ember-high: #c0743f;

  /* Selected state: the one look for every chosen preset, segment and toggle
     button (gold tint, gold hairline, gold text). */
  --selected-bg: rgba(244, 176, 0, 0.10);
  --selected-bg-hover: rgba(244, 176, 0, 0.15);
  --selected-ring: inset 0 0 0 1px rgba(244, 176, 0, 0.24);
  --selected-color: var(--gold);

  /* Text sizes: 10, 11, 12, 13, 14, 16, 20, 24px only, whole pixels, plus the
     one display size below for the sign-in pages' heading.
     portal/test_style_guardrail.py fails on anything else, and on colours not
     defined in this file (existing exceptions live in portal/style_baseline.json).

     Type scale. Labels stay in caps; hierarchy comes from size and weight:
     page title > card title (gold, heavy) > table header > control label. */
  --type-display-size: 38px;
  --type-card-title-size: 13px;
  --type-card-title-weight: 800;
  --type-card-title-tracking: 0.8px;
  --type-label-size: 11px;
  --type-label-weight: 700;
  --type-label-tracking: 1.1px;
  --type-th-size: 11px;
  --type-th-weight: 700;
  --type-th-tracking: 0.6px;
  --type-table-size: 12px;
  --type-table-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --type-value-size: 13px;
  --type-value-weight: 500;
}

/* Light theme. Applied when <html data-theme="light">, which only the admin-only
   theme switch in portal_base.html sets for now. Same tokens, light values: text
   and gold at least 4.5:1 on white, chart colours at least 3:1, overlays in navy ink. */
:root[data-theme="light"] {
  --color-negative: #c2413a;
  --color-positive: #1b7f53;
  --color-orange: #b4580f;
  --color-blue: #2566ad;
  --color-purple: #6a4fc2;
  --color-yellow: #8a6a00;
  --color-blue-text: #1f5a9a;
  --color-purple-text: #5b42b0;
  --color-teal-text: #17766f;
  --color-negative-text: #b3362e;
  --data-call-high-text: #5b3cc4;
  --gold: #8f6400;
  --data-steel: #6094cf;
  --data-amber: #cf7f1a;
  --data-rose: #cb7886;
  --data-sage: #5fa06d;
  --data-clay: #cb8142;
  --data-violet: #958ac5;
  --data-teal: #469f99;
  --data-call-high: #7b5ce0;
  --data-orchid: #b181ba;
  --data-slate: #7794bc;
  --data-sky: #3b9eb5;
  --data-olive: #7f9a4a;
  --data-sand: #a2924b;
  --data-blush: #c37d94;
  --data-forecast: #626872;
  --data-layer-blue: #3987e5;
  --data-layer-aqua: #199e70;
  --data-layer-violet: #9085e9;
  --data-layer-magenta: #d55181;
  --color-text: #13203b;
  --bg-1: #f6f8fb;
  --bg-2: #eaeff6;
  --color-text-strong: #0a1426;
  --color-text-secondary: rgba(19, 32, 59, 0.78);
  --color-text-disabled: rgba(19, 32, 59, 0.42);
  --surface-deep: #e9eef5;
  --surface-card: #f9fbfd;
  --surface-head: #eef2f8;
  --surface-control: #e2e8f1;
  --surface-control-hover: #d6deea;
  --line-1: rgba(19, 32, 59, 0.08);
  --line-2: rgba(19, 32, 59, 0.12);
  --line-3: rgba(19, 32, 59, 0.18);
  --line-4: rgba(19, 32, 59, 0.28);
  --line-5: rgba(19, 32, 59, 0.40);
  --fill-1: rgba(19, 32, 59, 0.03);
  --fill-2: rgba(19, 32, 59, 0.05);
  --fill-3: rgba(19, 32, 59, 0.08);
  --fill-4: rgba(19, 32, 59, 0.12);
  --fill-range: rgba(19, 32, 59, 0.10);
  --fill-sunken: rgba(19, 32, 59, 0.04);
  --shadow-soft: rgba(19, 32, 59, 0.10);
  --shadow-strong: rgba(19, 32, 59, 0.18);
  --label-halo: transparent;             /* dark labels on pale cells need none; a navy haze blurs them */
  --scrim: rgba(19, 32, 59, 0.35);
  --data-heat-ember-low: #f6ece4;
  --data-heat-ember-mid: #e6b48f;
  --data-heat-ember-high: #c0743f;
  --selected-bg: rgba(143, 100, 0, 0.10);
  --selected-bg-hover: rgba(143, 100, 0, 0.15);
  --selected-ring: inset 0 0 0 1px rgba(143, 100, 0, 0.30);
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root { --transition-sidebar: 0s; }
}