/* ════════════════════════════════════════════════
   AstroE TrendBoard — Design tokens
   Theme class lives on <html>: .theme-dark | .theme-light
   Values come from the approved mockups (assest/screens).
   ════════════════════════════════════════════════ */

:root {
  /* ── Brand (theme-independent) ── */
  --accent: #DB2777;            /* buttons, active states — white text on top */
  --on-accent: #FFFFFF;
  --accent-soft: rgba(236, 72, 153, .16);
  --pink-marker: #EC4899;       /* chart crosshair marker, halos */
  --ring-from: #F966B7;         /* mascot badge ring gradient */
  --ring-to: #1E3A8A;
  --badge-fill: #F4F4F8;

  /* ── Type ── */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Radii ── */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 14px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-3xl: 22px;
  --r-window: 28px;
  --r-pill: 999px;

  /* ── Layout ── */
  --sidebar-w: 236px;
  --chart-panel-w: 340px;
  --tap: 44px;                  /* minimum mobile tap target */

  /* ── Layers ── */
  --z-glow: 0;
  --z-window: 1;
  --z-sticky: 20;
  --z-menu: 30;
  --z-panel: 40;
  --z-toast: 50;
}

/* ── Dark (default) ── */
:root,
.theme-dark {
  color-scheme: dark;
  --bg: #000000;
  --frame: rgba(8, 11, 26, .84);
  --panel: rgba(15, 20, 44, .6);
  --chart: #0C1024;
  --space: #03050F;
  --tip: #1A2140;
  --input: rgba(0, 0, 0, .35);

  --grid: rgba(255, 255, 255, .055);
  --line: rgba(255, 255, 255, .07);
  --line2: rgba(255, 255, 255, .13);
  --orbit: rgba(255, 255, 255, .12);
  --beam: rgba(255, 255, 255, .35);
  --star: rgba(255, 255, 255, .7);
  --star2: rgba(255, 255, 255, .35);

  --text: #EDEEF3;
  --muted: #8B8FA3;
  --faint: #5F6378;             /* decorative only: lines, axis ticks (3.2:1) */
  --faint-text: #7A7E93;        /* small readable text (4.7:1 on panels) */

  --accent-text: #F9A8D4;
  --dot: #FBCFE8;               /* beacon lights */
  --g1: rgba(236, 72, 153, .42);/* pink glow */
  --g2: rgba(30, 58, 160, .5);  /* dark-blue glow */

  /* data only */
  --up: #4FD1A5;
  --down: #FF6B5A;
  --up-text: #4FD1A5;
  --down-text: #FF8C7C;
  --up-soft: rgba(79, 209, 165, .1);
  --down-soft: rgba(255, 107, 90, .1);
  --up-edge: rgba(79, 209, 165, .35);
  --down-edge: rgba(255, 107, 90, .35);

  --shadow-window: 0 40px 120px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, .35);
}

/* ── Light ── */
.theme-light {
  color-scheme: light;
  --bg: #ECECF1;
  --frame: rgba(255, 255, 255, .82);
  --panel: rgba(246, 246, 250, .9);
  --chart: #FFFFFF;
  --space: #F7F7FB;
  --tip: #FFFFFF;
  --input: #FFFFFF;

  --grid: rgba(15, 18, 30, .06);
  --line: rgba(15, 18, 30, .08);
  --line2: rgba(15, 18, 30, .15);
  --orbit: rgba(15, 18, 30, .14);
  --beam: rgba(15, 18, 30, .2);
  --star: rgba(20, 20, 40, .18);
  --star2: rgba(20, 20, 40, .1);

  --text: #0E1225;              /* brand navy */
  --muted: #5A5E70;
  --faint: #8A8EA0;
  --faint-text: #6A6E82;

  --accent-text: #BE185D;
  --g1: rgba(236, 72, 153, .22);
  --g2: rgba(30, 58, 138, .16);

  --up: #16A37B;
  --down: #E5484D;
  --up-text: #0A7759;           /* mockup #0B7F5F, darkened a hair: 4.2 → 4.7:1 on the change chip */
  --down-text: #BC382C;         /* mockup #C43A2E: 4.35 → 4.65:1 on the change chip */
  --up-soft: rgba(22, 163, 123, .1);
  --down-soft: rgba(229, 72, 77, .1);
  --up-edge: rgba(22, 163, 123, .35);
  --down-edge: rgba(229, 72, 77, .35);

  --shadow-window: 0 40px 120px rgba(14, 18, 37, .14), inset 0 1px 0 rgba(255, 255, 255, .6);
  --shadow-pop: 0 12px 32px rgba(14, 18, 37, .12);
}