/* 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;
  --card: #111827F0;
  --card-stroke: #1f2937;

  /* Color — ink */
  --ink: #eef1f5;
  --muted: #eef1f5;

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

  /* Shape */
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 25px 80px rgba(0, 0, 0, .35), 0 2px 0 rgba(255, 255, 255, .02) inset;

  /* Ink — extended */
  --ink-secondary: #eef1f5;
  --muted-dark: #eef1f5;

  /* Sidebar + layout */
  --bg-sidebar: #0a1428;
  --bg-sidebar-hover: rgba(255, 255, 255, 0.045);
  --bg-elevated: #1a2236;
  --border-subtle: rgba(255, 255, 255, 0.07);
  --shadow-sidebar: 4px 0 24px rgba(0, 0, 0, 0.28);
  --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-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;
  --color-teal-text: #7fd8d0;
  --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;          /* login backdrop, darkest ground */
  --surface-card: #101c3a;          /* cards, panels, table bodies */
  --surface-card-alt: #141f3a;      /* card variant used by a few older panels */
  --surface-well: #0c1730;          /* recessed wells */
  --surface-head: #14254a;          /* table header rows, sticky headers */
  --surface-menu: #16223f;          /* open dropdown menus */
  --surface-control: #25344e;       /* filled buttons (Demo Mode, Send Invite) */
  --surface-control-hover: #30415e;

  /* 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;
  --data-orchid: #b98fc0;
  --data-slate: #8ba3c4;
  --data-sky: #6fb8c9;
  --data-olive: #9fb673;
  --data-sand: #b6a86a;
  --data-blush: #d0a0b0;

  /* 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;

  /* 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.
     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-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;
}

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