/* ============================================================
   Discover HALO — Design tokens
   Liquid glass meets cyberpunk-cool. Dark-first.
   ============================================================ */

:root {
  /* ---- Brand neon ---- */
  --halo-cyan:    #00B4E6;
  --halo-violet:  #7C3AC8;
  --halo-magenta: #D61F8A;
  --halo-yellow:  #FFDD00;
  --halo-amber:   #FFC800;
  --halo-orange:  #FF7D00;
  --accent-blue:  #1C64F2;
  --accent-blue-2:#4EAAE2;
  --lime:         #4ADE80;
  --lime-pale:    #ECFFD6;
  --signal-red:   #FF3B3B;

  /* RGB channels — single source for every rgba(var(--x), a) glow/border so the
     ~80 cyan/blue/lime literals collapse to tokens (and stay re-themeable). */
  --halo-cyan-rgb:    0, 180, 230;
  --accent-blue-rgb:  28, 100, 242;
  --lime-rgb:         74, 222, 128;
  --signal-red-rgb:   255, 59, 59;

  /* Emphasis ink — the on-brand SOLID highlight for keywords inside headings,
     replacing the old gradient-clipped text. Sky-blue mirrors the Halo app's
     dark-theme accent; ~8:1 on black, so it passes AA even at heading sizes. */
  --accent-ink:   #5BB0EE;

  /* ---- Canvas (dark) ---- */
  --bg:     #000000;
  --bg-1:   #080808;
  --bg-2:   #0E0E0E;
  --panel:  #111113;
  --raised: #16161A;
  --navy:   #0F1421;

  /* ---- Ink ---- */
  --ink:    rgba(255,255,255,.95);
  --ink-70: rgba(255,255,255,.72);
  --ink-50: rgba(255,255,255,.55);
  --ink-30: rgba(255,255,255,.34);

  /* ---- Brand gradients — rally around BLUE (rainbow lives only in the logo) ----
     blue + cyan are the core family; amber (#FFC800) is the complementary accent. */
  --grad-blue:      linear-gradient(90deg, #3B82F6 0%, #00B4E6 100%);   /* luminous blue→cyan — text, rules, glow */
  --grad-blue-deep: linear-gradient(135deg, #2D7FF9 0%, #1C64F2 100%);  /* deep blue — buttons/toggles (white text) */
  --grad-blue-radial: radial-gradient(circle, #00B4E6 0%, rgba(var(--accent-blue-rgb),.6) 48%, rgba(255,255,255,0) 100%);
  --accent-amber:   #FFC800;   /* complementary accent — use sparingly for freshness */
  --accent-amber-2: #FF9D2E;   /* warmer amber for subtle depth */
  /* legacy aliases kept pointing at the blue system so existing refs stay on-brand */
  --grad-halo: var(--grad-blue);
  --grad-halo-soft: var(--grad-blue-deep);
  --grad-halo-radial: var(--grad-blue-radial);

  /* ---- Liquid glass recipe ---- */
  --glass-fill:        linear-gradient(180deg, rgba(236,240,255,.08) 0%, rgba(236,240,255,.035) 45%, rgba(236,240,255,.022) 100%);
  --glass-fill-strong: linear-gradient(180deg, rgba(236,240,255,.13) 0%, rgba(236,240,255,.06) 100%);
  /* Blur radius kept modest: Chrome re-runs backdrop-filter on every glass panel
     each frame the animated background moves, and cost scales steeply with the
     radius. 13px still reads as frosted glass but composites far cheaper. */
  --glass-blur:        blur(13px) saturate(130%);
  --glass-blur-light:  blur(8px) saturate(120%);
  --glass-bd:          rgba(240,244,255,.14);
  --glass-bd-strong:   rgba(240,244,255,.26);
  --glass-edge:        inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.45);
  --glass-shadow:      0 18px 46px -22px rgba(0,0,0,.95);
  --glass-neon-edge:   inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 26px -12px var(--halo-cyan);
  --glass-neon-glow:   0 6px 34px -10px rgba(var(--halo-cyan-rgb),.6);

  /* ---- Lit-accent glass — the PRIMARY-action material (mirrors the Halo app's
     .w-btn--lime: translucent accent gradient, accent text + keyline, lit from
     within — never a solid blue slab with white text). ---- */
  --glass-accent-fill: linear-gradient(180deg, rgba(var(--accent-blue-rgb),.28) 0%, rgba(var(--accent-blue-rgb),.12) 100%);
  --glass-accent-bd:   rgba(var(--accent-blue-rgb),.65);
  --glass-accent-edge: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 26px -12px rgba(var(--accent-blue-rgb),.7);
  --glass-accent-glow: 0 6px 34px -10px rgba(var(--accent-blue-rgb),.55);

  /* ---- Chart ramp — the app's all-blue BarChart gradient (no rainbow):
     bright sky-blue crest → deep azure base (BarChart.tsx top/bottom). ---- */
  --chart-sky:   #38B6F0;   /* rgb(56,182,240) — bright crest */
  --chart-blue:  #1C8FE0;
  --chart-azure: #1C64F2;   /* brand accent */
  --chart-deep:  #0C348C;   /* rgb(12,52,140) — deep base */
  --chart-grad:  linear-gradient(180deg, #38B6F0 0%, #1C64F2 55%, #0C348C 100%);

  /* ---- Type ----
     Roobert is the Halo brand face (see styles/fonts.css). Mono mirrors
     the app's --font-mono stack (SF Mono first, JetBrains as the web fallback). */
  --font-sans: "Roobert", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", "Fira Code", ui-monospace, monospace;

  /* ---- Spacing scale ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* ---- Radius ---- */
  --r-chip: 10px; --r-card: 20px; --r-panel: 28px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --t-fast: 180ms; --t-base: 280ms; --t-slow: 480ms;

  /* ---- Layout ---- */
  --maxw: 1180px;
  --header-h: 68px;
}