/* Design tokens — light is the default; dark overrides via data-theme or system preference.
 *
 * The palette is zinc + a red-600 brand, matched to the companion SaaS site so the two
 * read as one product. Dark is the reference mode; light is the same brand hues over
 * inverted zinc surfaces.
 *
 * Two reds, on purpose:
 *   --cta      solid brand fills (buttons, active segments). Carries white text.
 *   --accent   accent *ink* and borders (links, focus rings, active icons). One step
 *              lighter in dark mode, because red-600 on a near-black page is 4.1:1 —
 *              fine behind white text, too dim to be text itself.
 * A sale is also red. Polarity is never carried by colour alone: every sell is labelled
 * SALE and every buy is green, so the shared red family costs nothing.
 */

:root {
  /* Surfaces & ink (zinc) */
  --page: #fafafa;        /* zinc-50  */
  --surface: #ffffff;
  --surface-2: #f4f4f5;   /* zinc-100 */
  --ink: #09090b;         /* zinc-950 */
  --ink-2: #52525b;       /* zinc-600 */
  --ink-muted: #71717a;   /* zinc-500 */
  --hairline: #e4e4e7;    /* zinc-200 */
  --border: rgba(9, 9, 11, 0.10);

  /* Brand (red-600 → red-500 on hover) */
  --cta: #dc2626;
  --cta-hover: #ef4444;
  --accent: #dc2626;
  --accent-strong: #b91c1c;   /* red-700 */
  --accent-wash: rgba(220, 38, 38, 0.09);

  /* Trade direction (delta colors — text-safe on this surface) */
  --buy: #047857;             /* emerald-700 — text */
  --buy-mark: #059669;        /* emerald-600 — fills */
  --buy-wash: rgba(5, 150, 105, 0.10);
  --buy-ink: #052e16;         /* text that sits *on* a solid --buy-mark fill */
  --sell: #b91c1c;
  --sell-mark: #dc2626;
  --sell-wash: rgba(220, 38, 38, 0.09);

  /* Highlight (amber-600) — the watchlist star, and anything flagged for attention. */
  --highlight: #b45309;       /* amber-700 — text */
  --highlight-mark: #d97706;  /* amber-600 — fills */
  --highlight-wash: rgba(217, 119, 6, 0.12);

  /* "Noise" trades toggled into view (10b5-1, options, gifts) — de-emphasised */
  --muted-tone: #71717a;
  --muted-mark: #a1a1aa;
  --muted-wash: rgba(113, 113, 122, 0.10);

  /* Chart chrome */
  --grid: #e4e4e7;
  --spark-track: #fecaca;     /* red-200 */

  /* Fear & Greed gauge — a diverging red→grey→green ramp, saturated at the poles.
     Hue is reinforcement only (needle angle + number + label carry the value), so
     these need contrast against the surface, not against each other. */
  --gauge-1: #b91c1c;         /* red-700   — extreme fear */
  --gauge-2: #f87171;         /* red-400   — fear */
  --gauge-3: #a1a1aa;         /* zinc-400  — neutral */
  --gauge-4: #34d399;         /* emerald-400 — greed */
  --gauge-5: #047857;         /* emerald-700 — extreme greed */

  /* Ambience — the fixed layer behind every page (see base.css → body::before/::after).
     Kept faint on purpose: it should read as depth, not as decoration. On light
     surfaces a red wash goes pink fast, so these run at roughly a third of dark's. */
  --glow-a: rgba(220, 38, 38, 0.07);   /* the warm bloom behind the header */
  --glow-b: rgba(220, 38, 38, 0.05);   /* its cooler, wider companion */
  --rule: rgba(9, 9, 11, 0.035);       /* the graph-paper grid */
  --rule-gap: 64px;
  --grain: 0.16;                       /* film-grain opacity */
  --appbar-tint: 78%;                  /* surface kept in the translucent header */

  /* Elevation & shape */
  --shadow: 0 1px 2px rgba(9, 9, 11, 0.05), 0 4px 16px rgba(9, 9, 11, 0.06);
  --shadow-pop: 0 4px 12px rgba(9, 9, 11, 0.10), 0 12px 32px rgba(9, 9, 11, 0.12);
  --radius: 12px;
  --radius-sm: 8px;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --page: #0a0a0b;
  --surface: #18181b;     /* zinc-900 — cards, panels */
  --surface-2: #27272a;   /* zinc-800 — inset rows, hovers */
  --ink: #fafafa;         /* zinc-50  */
  --ink-2: #a1a1aa;       /* zinc-400 */
  --ink-muted: #71717a;   /* zinc-500 */
  --hairline: #27272a;    /* zinc-800 */
  --border: rgba(255, 255, 255, 0.08);

  --cta: #dc2626;             /* red-600 */
  --cta-hover: #ef4444;       /* red-500 */
  --accent: #ef4444;          /* red-500 — legible as ink on #0a0a0b */
  --accent-strong: #f87171;   /* red-400 */
  --accent-wash: rgba(220, 38, 38, 0.16);

  --buy: #10b981;             /* emerald-500 — text */
  --buy-mark: #059669;        /* emerald-600 — fills */
  --buy-wash: rgba(5, 150, 105, 0.16);
  --buy-ink: #052e16;
  --sell: #f87171;            /* red-400 — text */
  --sell-mark: #ef4444;       /* red-500 — fills */
  --sell-wash: rgba(239, 68, 68, 0.14);

  --highlight: #f59e0b;       /* amber-500 — text */
  --highlight-mark: #d97706;  /* amber-600 — fills */
  --highlight-wash: rgba(217, 119, 6, 0.16);

  --muted-tone: #a1a1aa;
  --muted-mark: #52525b;
  --muted-wash: rgba(161, 161, 170, 0.12);

  --grid: #27272a;
  --spark-track: #7f1d1d;     /* red-900 */

  --gauge-1: #dc2626;         /* red-600     — extreme fear */
  --gauge-2: #f87171;         /* red-400     — fear */
  --gauge-3: #71717a;         /* zinc-500    — neutral */
  --gauge-4: #34d399;         /* emerald-400 — greed */
  --gauge-5: #10b981;         /* emerald-500 — extreme greed */

  --glow-a: rgba(220, 38, 38, 0.20);
  --glow-b: rgba(239, 68, 68, 0.10);
  --rule: rgba(255, 255, 255, 0.022);
  --grain: 0.28;
  --appbar-tint: 72%;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-pop: 0 4px 12px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.5);

  color-scheme: dark;
}