/* ============================================================================
   Stevens Energy — V5 design tokens (port of lib/main.dart `class C`, 184-206)
   Dark is the primary mode; light is the warm-paper derivative with data
   colours deepened for contrast (Claude Design handoff 2026-07-04).
   ========================================================================== */

:root {
  /* surfaces + text (dark) — TESLA direction; v1.26.4 cool graphite ramp
     (user: previous greys read warm/off). Slightly blue-leaning neutrals,
     one hue, lightness steps only. */
  --bg: #101214;
  --card: #191C1F;
  --tile: #22262A;
  --text: #EEF0F2;
  --muted: #8C949D;
  --line: #2E333A;

  /* data accents (dark) — desaturated, technical; never toy-bright */
  --amber: #D9A13B;
  --green-c: #3D8B57;
  --blue-c: #6FA8D6;
  --purple-c: #8B93B8;
  --lime-c: #4E9E4E;

  /* const accents — themed via light overrides below */
  --blue: #6FA8D6;
  --teal: #3E8F83;
  --purple: #8B93B8;
  --green: #3D8B57;
  --coral: #C05A3A;
  --red: #C63B3B;
  --soc: #7C8494;            /* SOC % dashed series (slate) */

  /* flow-hero device palette — dark panels, lifted a clear step above the
     card so the diagram reads (v1.26.4: they were blending in) */
  --dev-white: #262B30;
  --dev-edge: #40474F;
  --dev-detail: #838B94;
  --dev-red: #C94F42;

  /* signature chrome */
  --login-coral: #CC785C;
  --err: #C0392B;

  /* radii — small + technical (was 20/14/34) */
  --r-card: 12px;
  --r-tile: 10px;
  --r-pill: 8px;

  /* motion (v1.31) — the app's de-facto entrance curve + duration steps.
     Shared by transitions and the reveal/panel-enter keyframes so timing is
     consistent; reduced-motion neutralises the keyframes (see app.css). */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);   /* slight overshoot — sheets/pop-ins (v1.32) */
  --dur-fast: 160ms;
  --dur-med: 260ms;
  --dur-slow: 650ms;

  color-scheme: dark;
}

[data-theme="light"] {
  /* Tesla white (v1.26): clean white, light grey panels, near-black text */
  --bg: #FFFFFF;
  --card: #F4F4F4;
  --tile: #EAEAEA;
  --text: #171717;
  --muted: #6B6B6B;
  --line: #D8D8D8;

  /* accents deepened for white surfaces */
  --amber: #B07C1D;
  --green-c: #2E6E44;
  --blue-c: #33689B;
  --purple-c: #5C6690;
  --lime-c: #3A7C3A;

  --blue: #33689B;
  --teal: #2E6E63;
  --purple: #5C6690;
  --green: #2E6E44;
  --coral: #A34A2C;
  --soc: #5E6672;

  /* light devices stay light hardware */
  --dev-white: #F4F3F0;
  --dev-edge: #D8D6D0;
  --dev-detail: #A9A7A1;

  color-scheme: light;
}

/* ---- type utilities (ports of numStyle / lbl / _valueUnit) ---- */

/* Space Grotesk data numerals — numStyle() (main.dart 209-212) */
.num {
  font-family: 'Space Grotesk', 'Hanken Grotesk', sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;   /* live values don't jiggle */
}

/* small-caps section/tile label — lbl() (main.dart 1163-1167) */
.lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--muted);
}
.lbl--9  { font-size: 9px; }
.lbl--95 { font-size: 9.5px; }
.lbl--10 { font-size: 10px; }
.lbl--12 { font-size: 12px; }

/* card / section titles */
.card-title  { font-size: 16px;   font-weight: 800; color: var(--text); }
.card-title--sub { font-size: 15.5px; font-weight: 700; color: var(--text); }

/* value + smaller trailing unit — _valueUnit (main.dart 1170-1182) */
.vu-unit { font-weight: 600; color: var(--muted); }