/* ============================================================
   PULSE — Design tokens (single source of truth for every surface).

   Loaded FIRST by login.html, hub.html, sections/pulse/public/index.html and
   sections/control-panel/public/index.html. Both naming conventions that grew
   up across the portal are defined here from the same values so nothing has
   to be renamed to pick them up:

     unprefixed  --bg-panel, --cyan, --text-hi …   (Pulse dashboard, Control Panel)
     --pulse-*   --pulse-bg-panel, --pulse-cyan …  (hub, login, report starter)

   Dark is the default (`:root`). Light is `:root[data-theme="light"]`, set on
   <html> before first paint by the small inline theme-boot script in every
   page's <head>, and persisted in localStorage under the shared key
   "pulse-theme". Each theme is designed on its own — light is not an
   inversion of dark — but they share geometry, scale and semantics.

   Rules for contributors:
     * Never write a hex/rgba colour in component CSS — use a token, or one
       of the `--*-soft` / `--*-line` derivatives below.
     * Add new tokens here, in both themes, with a contrast check
       (text on --bg-panel must reach 4.5:1; UI accents 3:1).
     * Brands: add the brand to sections/pulse/public/brand-config.js; the
       CSS variables under "Brand identity" mirror those values for chrome.
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---- Surfaces ---- */
  --bg-void: #070c16;
  --bg-deep: #0a1424;
  --bg-panel: #101d33;
  --bg-panel-hi: #142542;
  --bg-panel-line: #1c2f4f;
  --line: #1c2f4f;
  --line-strong: #27406a;
  --bg-overlay: rgba(4, 9, 18, .72);
  --bg-input: #0c182b;
  --bg-hover: rgba(0, 217, 255, .06);
  --bg-selected: rgba(0, 217, 255, .12);

  /* ---- Accents ---- */
  --cyan: #00d9ff;
  --cyan-dim: #0a5a6e;
  --cyan-soft: rgba(0, 217, 255, .10);
  --cyan-line: rgba(0, 217, 255, .28);
  --gold: #ffc93c;
  --gold-dim: #8a6d1f;
  --gold-soft: rgba(255, 201, 60, .12);
  --gold-line: rgba(255, 201, 60, .32);
  --green: #34d399;
  --green-soft: rgba(52, 211, 153, .12);
  --green-line: rgba(52, 211, 153, .32);
  --red: #fb5d5d;
  --red-soft: rgba(251, 93, 93, .12);
  --red-line: rgba(251, 93, 93, .34);
  --orange: #fb923c;
  --orange-soft: rgba(251, 146, 60, .12);
  --purple: #a78bfa;
  --purple-soft: rgba(167, 139, 250, .12);
  --blue: #5ea3ff;
  --blue-soft: rgba(94, 163, 255, .12);

  /* ---- Text (all ≥ 4.5:1 on --bg-panel) ---- */
  --text-hi: #eaf1ff;
  --text-mid: #97a7c0;
  --text-dim: #7186a6;
  --text-inverse: #071120;
  --btn-primary-text: #071120;

  /* ---- Semantic status ---- */
  --status-success: var(--green);
  --status-success-soft: var(--green-soft);
  --status-warning: var(--gold);
  --status-warning-soft: var(--gold-soft);
  --status-danger: var(--red);
  --status-danger-soft: var(--red-soft);
  --status-info: var(--cyan);
  --status-info-soft: var(--cyan-soft);
  --status-neutral: var(--text-mid);
  --status-neutral-soft: rgba(151, 167, 192, .12);
  --status-forecast: var(--purple);
  --status-forecast-soft: var(--purple-soft);

  /* ---- Brand identity (mirrors brand-config.js; chrome only) ---- */
  --brand-red-bull: #103876;
  --brand-red-bull-on-dark: #4a90d9;
  --brand-budweiser: #c8102e;
  --brand-corona: #4a90d9;
  --brand-rauch-juice: #ffc000;
  --brand-cafemio: #7a4b3a;
  --brand-portfolio: #8b5cf6;

  /* ---- Chart palette (categorical, both themes ≥ 3:1 on panels) ---- */
  --chart-1: #00d9ff;
  --chart-2: #ffc93c;
  --chart-3: #34d399;
  --chart-4: #a78bfa;
  --chart-5: #fb923c;
  --chart-6: #5ea3ff;
  --chart-7: #f472b6;
  --chart-8: #94a3b8;
  --chart-grid: #1c2f4f;
  --chart-axis: #7186a6;
  --chart-label: #97a7c0;
  --chart-label-hi: #eaf1ff;
  --chart-tooltip-bg: #0c182b;
  --chart-positive: #34d399;
  --chart-negative: #fb5d5d;
  --chart-neutral: #7186a6;
  --chart-target: #ffc93c;
  --chart-forecast: #a78bfa;
  --chart-band: rgba(167, 139, 250, .16);

  /* ---- Typography ---- */
  --font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
  --pulse-font-display: var(--font-display);
  --pulse-font-body: var(--font-body);
  --pulse-font-mono: var(--font-mono);

  /* Type scale — nothing below 10px, and 10px is reserved for uppercase
     mono kickers with letter-spacing; body copy starts at --fs-sm. */
  /* Pass 16: 11px is the floor. Nothing on a screen should need a lean-in. */
  --fs-2xs: 11px;
  --fs-xs: 11.5px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-base: 14px;
  --fs-lg: 15px;
  --fs-xl: 16px;
  --fs-2xl: 18px;
  --fs-3xl: 20px;
  --fs-4xl: 22px;
  --fs-5xl: 24px;
  --fs-6xl: 28px;
  --fs-7xl: 32px;
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --tracking-kicker: .12em;
  --tracking-wide: .06em;
  --tnum: "tnum" 1, "lnum" 1;

  /* ---- Spacing scale ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ---- Radius ---- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-subtle: 1px solid var(--line);
  --border-strong: 1px solid var(--line-strong);
  --border-accent: 1px solid var(--cyan-line);

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .28);
  --shadow-md: 0 8px 22px rgba(0, 0, 0, .34);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, .46);
  --shadow-lift: 0 12px 30px rgba(0, 0, 0, .35);
  --shadow-glow-cyan: 0 0 0 1px var(--cyan-line), 0 8px 26px rgba(0, 217, 255, .10);
  --shadow-glow-gold: 0 0 0 1px var(--gold-line), 0 8px 26px rgba(255, 201, 60, .10);
  --shadow-focus: 0 0 0 3px rgba(0, 217, 255, .35);

  /* ---- Focus ring (visible on every theme) ---- */
  --focus-ring: 2px solid var(--cyan);
  --focus-ring-offset: 2px;

  /* ---- Icon sizes ---- */
  --icon-xs: 12px;
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-lg: 20px;
  --icon-xl: 24px;

  /* ---- Motion ---- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --dur-reveal: 480ms;
  --ease-standard: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  /* ---- Layout ---- */
  --bp-sm: 640px;
  --bp-md: 900px;
  --bp-lg: 1100px;
  --bp-xl: 1450px;
  --content-max: 1680px;
  --control-height: 34px;
  --touch-target: 44px;

  /* ---- Z-index scale ---- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 700;
  --z-dropdown: 800;
  --z-drawer: 1100;
  --z-modal: 1200;
  --z-toast: 1300;
  --z-tooltip: 1400;

  /* ---- --pulse-* aliases (hub / login / report starter) ---- */
  --pulse-bg-void: var(--bg-void);
  --pulse-bg-deep: var(--bg-deep);
  --pulse-bg-panel: var(--bg-panel);
  --pulse-bg-panel-hi: var(--bg-panel-hi);
  --pulse-line: var(--line);
  --pulse-gold: var(--gold);
  --pulse-cyan: var(--cyan);
  --pulse-green: var(--green);
  --pulse-red: var(--red);
  --pulse-text-hi: var(--text-hi);
  --pulse-text-mid: var(--text-mid);
  --pulse-text-dim: var(--text-dim);
}

/* ------------------------------------------------------------
   Light theme — "White Horizon". Designed as its own palette: warm paper
   surfaces, deeper ink text, and accent colours darkened until they clear
   4.5:1 on white so coloured KPI deltas and links stay readable.
   ------------------------------------------------------------ */
/* V20.14.353 -- SLATE (Ramy, 6 Oct: "One portal, two paints. Keep the dark HUD as the identity. Light is the same
   chrome on slate: void #d5e0ec, panels #f5f9fc, cyan #007ea8, gold #8a6200, corner brackets."). The light theme is
   no longer a palette of its own: it is the dark HUD's chrome -- glass panels, corner brackets, cyan signal, gold
   second accent -- painted on slate. These are still the only light tokens; the retired paper / sky / prismatic /
   azure / precision / orbit layers declared none that survive. Ink is deep navy (#0b1a2e 16.5:1 on the panel,
   13.1:1 on the void); captions stay at 5:1 or better on the void. */
:root[data-theme="light"] {
  /* V20.14.310 -- the light theme was PAPER (lavender and purple).
     V20.14.331 -- it was QUANTUM PEARL (pearl and frost surfaces, #0369a1 as text).
     V20.14.353 -- it is SLATE: the dark HUD's chrome on slate (see above); paper and sky are retired. */
  color-scheme: light;

  /* V20.14.146 -- reported: "I think the light theme could be better and
     futuristic more than the current one."
     The largest single reason it was not: --bg-panel and --bg-panel-hi were
     BOTH pure #ffffff, so "raised" and "resting" were the same colour and the
     whole interface was one flat plane. Depth in a light theme has to be built
     out of very small steps, but they have to exist. Three surfaces now, each a
     shade cooler than the last, and none of them pure white -- a console lit by
     screens is never warm-white. Text contrast is unaffected: the ink is dark
     and these move by under two percent. */
  /* V20.14.202 -- reported: "when I switch from dark to light, I see it's
     dimmed". The surfaces were part of it. --bg-panel sat 1.12x above
     --bg-void in luminance, which is not enough of a step for a panel to
     read as a lit object sitting ON the page rather than a slightly paler
     patch OF it. The panel goes to near-white and the page a shade deeper:
     1.16x. Text contrast is unaffected -- the ink is dark and gains. */
  /* V20.14.353 -- slate: the void 1.27x under the panel (release202: below 1.14 daylight goes flat) */
  --bg-void: #d5e0ec;
  --bg-deep: #e3ebf3;
  --bg-panel: #f5f9fc;
  --bg-panel-hi: #ebf2f8;
  /* Daylight, not overcast: the page carries a cool-to-warm wash instead of
     one flat grey, so the eye reads a lit room. Consumed by the light-theme
     body rule; the flat --bg-void above stays the fallback for anything that
     needs a single colour. */
  /* V20.14.353 -- the dark HUD's ground on slate: the same two glows the dark page carries (cyan top left, a faint
     gold to the right), on a flat slate void. No sky wash, no lavender, no grid paper. */
  --bg-daylight: radial-gradient(ellipse 1200px 700px at 20% -10%, rgba(0, 126, 168, .10), transparent 60%), radial-gradient(ellipse 1000px 700px at 100% 20%, rgba(138, 98, 0, .05), transparent 55%), linear-gradient(180deg, #d5e0ec 0%, #d5e0ec 100%);
  /* V20.14.353 -- lines are the accent at low strength, as the dark HUD's are (rgba(0, 229, 255, .16)) */
  --bg-panel-line: rgba(0, 126, 168, .24);
  --line: rgba(0, 126, 168, .24);
  --line-strong: rgba(0, 126, 168, .42);
  --bg-overlay: rgba(16, 37, 67, .42);
  /* V20.14.353 -- an input is a well a step under the panel, as in the dark HUD */
  --bg-input: #eaf1f7;
  --bg-hover: rgba(0, 126, 168, .07);
  --bg-selected: rgba(0, 126, 168, .13);

  /* V20.14.353 -- the HUD's signal cyan on slate (Ramy's value); 4.4:1 on the panel, so long text stays in ink */
  --cyan: #007ea8;
  --cyan-dim: #d4e9f2;
  --cyan-soft: rgba(0, 126, 168, .10);
  --cyan-line: rgba(0, 126, 168, .36);
  /* V20.14.353 -- the HUD's gold on slate (Ramy's value), 5.2:1 on the panel */
  --gold: #8a6200;
  --gold-dim: #efe2c2;
  --gold-soft: rgba(138, 98, 0, .10);
  --gold-line: rgba(138, 98, 0, .34);
  /* V20.14.353 -- green and red one step deeper, so a delta reads at 4.5:1 on the slate void too (4.8 / 4.7), not
     only on the panel (6.0 / 6.0) */
  --green: #0c6b62;
  --green-soft: rgba(13, 148, 136, .11);
  --green-line: rgba(13, 148, 136, .32);
  --red: #b0302f;
  --red-soft: rgba(229, 83, 75, .10);
  --red-line: rgba(229, 83, 75, .32);
  --orange: #c2410c;
  --orange-soft: rgba(194, 65, 12, .10);
  --purple: #2f5bd3;
  --purple-soft: rgba(47, 91, 211, .10);
  --blue: #245fc7;
  --blue-soft: rgba(37, 99, 235, .10);

  --text-hi: #0b1a2e;
  --text-mid: #33465e;
  --text-dim: #4a5d77;   /* V20.14.265 -- was #536d86: 4.0:1 on the tinted panels */
  --text-inverse: #ffffff;
  --btn-primary-text: #ffffff;

  --status-neutral-soft: rgba(63, 88, 120, .10);

  --brand-red-bull-on-dark: #103876;

  /* V20.14.202 -- THE CHARTS WERE DARK BECAUSE THEY WERE HELD TO A STANDARD
     THEY ARE NEVER USED AT.
     --chart-1..8 appear ZERO times in the product's CSS. Nothing paints text
     with them; they exist only to be read by readTokenPalette() into ECharts
     series colours, which is to say they are FILLS -- bars, slices, treemap
     tiles, areas. Fills need 3:1 against the surface. These were all picked at
     4.2-5.5:1, the standard for body text, and the only way to hit that on a
     white panel is to drop the luminance until the colour goes muddy. That is
     the "dimmed" in the report, and it is why the same charts look alive in
     the dark theme and flat in daylight: dark-theme fills were never squeezed
     this way.
     Every value below is brighter and more saturated, and every one still
     clears 3:1 on --bg-panel. The text tokens -- --chart-label, --chart-axis,
     --text-* -- are untouched and stay above 4.5:1, because those ARE text. */
  --chart-1: #0891d1;   /* 3.32:1 -- was #0084b8, 4.21 */
  --chart-2: #c97b00;   /* 3.32:1 -- was #b46b00, 4.16 */
  --chart-3: #0d9e8f;   /* 3.38:1 -- was #0b8a63, 4.35 */
  --chart-4: #5b7fe8;   /* 3.68:1 -- V20.14.331 periwinkle (no violet), brighter than the #6a5cd8 it replaced */
  --chart-5: #e5534b;   /* 3.53:1 -- was #c2410c, 5.18 */
  --chart-6: #1f6feb;   /* 4.58:1 -- V20.14.331 royal blue, brighter than the #2563eb it replaced */
  --chart-7: #d93b90;   /* 4.22:1 -- was #be2e6a, 5.54 */
  --chart-8: #64748b;   /* the neutral, unchanged */
  --chart-grid: rgba(0, 126, 168, .14);
  --chart-axis: #5b7191;
  --chart-label: #3d5573;
  --chart-label-hi: #0b1b33;
  --chart-tooltip-bg: #ffffff;
  /* The semantic fills follow the series fills for the same reason. */
  --chart-positive: #0d9e8f;
  --chart-negative: #e5534b;
  --chart-neutral: #566a89;
  --chart-target: #c97b00;
  --chart-forecast: #5b7fe8;
  --chart-band: rgba(0, 126, 168, .13);

  --shadow-sm: 0 1px 2px rgba(25, 67, 101, .08), 0 3px 9px rgba(25, 67, 101, .055);
  --shadow-md: 0 12px 30px rgba(25, 67, 101, .12), 0 2px 7px rgba(25, 67, 101, .07);
  --shadow-lg: 0 24px 60px rgba(25, 67, 101, .17), 0 6px 18px rgba(25, 67, 101, .08);
  --shadow-lift: 0 18px 40px rgba(25, 67, 101, .16), 0 4px 12px rgba(25, 67, 101, .08);
  /* V20.14.353 -- the glows in the slate cyan and gold */
  --shadow-glow-cyan: 0 0 0 1px rgba(0, 126, 168, .34), 0 10px 28px rgba(0, 126, 168, .16);
  --shadow-glow-gold: 0 0 0 1px rgba(138, 98, 0, .34), 0 10px 28px rgba(138, 98, 0, .14);
  --shadow-focus: 0 0 0 3px rgba(0, 126, 168, .24);

}

/* Theme switch (pass 15): an instant swap. Every earlier version cross-faded
   the surfaces (320ms, then 200ms) and, to keep that fade affordable,
   suspended the backdrop blurs and paused every keyframe animation for its
   duration -- and the combination is exactly what read as "the page pulses"
   when the theme changes: colours sliding, glows switching off and on,
   orbits stopping and restarting. A palette that changes in one frame is not
   a pulse. The .theme-transition class is still added by PulseUI for the
   duration of the switch so nothing else (hover transitions on buttons, for
   instance) fights the swap; it now only disables transitions. */
html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after {
  transition: none !important;
}

/* ============================================================================
   V20.14.146 -- the light theme's instrument grammar.

   Beyond the surfaces above, what made daylight read as a generic web app was
   that nothing in it looked MEASURED: every panel was a soft white rectangle
   with the same weight on all four sides. The dark theme has always carried a
   lit leading edge and square shoulders. Daylight gets the same grammar, in its
   own key -- a cool hairline at the top of each panel and corners that are cut
   rather than moulded.

   Deliberately restrained. A light theme that tries to be a dark theme with the
   lights on ends up grey and muddy; the aim is a drawing-office look -- white
   paper, fine rules, one accent -- not a dimmed console.
   ============================================================================ */
:root[data-theme="light"] .panel {
  border-radius: 6px;
  border-top: 2px solid rgba(13, 101, 144, .22);
  box-shadow: 0 1px 2px rgba(23, 62, 97, .06), 0 8px 24px -18px rgba(23, 62, 97, .5);
}
/* The page ground stops being a flat fill: a cool wash from the top, so panels
   sit ON something rather than floating in a void of the same colour. */
/* V20.14.202 -- the light page gradient was declared here too, without
   !important, so it lost to pulse-light-revamp.css on every page. The wash is
   now the --bg-daylight token above, and light-revamp is the one rule that
   applies it. */
/* Hairline rules rather than heavy borders: at this contrast a 1px line reads
   as a measurement and a 2px one reads as a box. */
:root[data-theme="light"] .panel .ptitle {
  letter-spacing: .015em;
}