/* ==========================================================================
   Things for Traders - shared colour tokens (goal #22, ux_fix_shell)
   One palette for the static site (web/static) and the Next app.
   Every text pair below meets WCAG 2.1 AA (4.5:1 text, 3:1 UI) on --bg and
   --surface in its theme (ratios in the audit, ux_onboard section B).

   Theme selection
   - Dark is the default. A page with no data-theme is dark on every OS setting
     (most static pages are hard-coded dark markup).
   - <html data-theme="light">  forces light.
   - <html data-theme="auto">   follows the OS (prefers-color-scheme). Used by
     pages built to read well in both (the hub pages).
   - <html data-theme="dark">   forces dark.
   A user theme toggle is a follow-up (it only has to set data-theme).

   Colour rules
   - --accent is the primary button fill (blue) with --accent-text on it.
   - --link is for text links (never --accent as a text colour on dark).
   - --bull / --bear are ONLY for long/short and P&L. Success/error use --ok/--err.
   ========================================================================== */

:root {
  color-scheme: dark;
  --bg: #0f1115;
  --surface: #181b22;
  --surface-2: #1f232c;
  --text: #f1f5f9;
  --text-2: #cbd5e1;
  --muted: #9aa4b2;
  --border: #3a4150;
  --border-strong: #4b5563;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-text: #ffffff;
  --link: #60a5fa;
  --link-hover: #93c5fd;
  --bull: #22c55e;
  --bear: #f87171;
  --warn: #fbbf24;
  --info: #38bdf8;
  --ok: #22c55e;
  --err: #f87171;
  --on-bull: #052e16;
  --on-bear: #450a0a;
  --focus: #60a5fa;
  --overlay-weak: rgba(255, 255, 255, 0.05);
  --overlay-medium: rgba(255, 255, 255, 0.08);
  --overlay-strong: rgba(255, 255, 255, 0.15);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --text: #0f172a;
  --text-2: #334155;
  --muted: #475569;
  --border: #94a3b8;
  --border-strong: #64748b;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-text: #ffffff;
  --link: #1d4ed8;
  --link-hover: #1e3a8a;
  --bull: #15803d;
  --bear: #b91c1c;
  --warn: #b45309;
  --info: #0369a1;
  --ok: #15803d;
  --err: #b91c1c;
  --on-bull: #ffffff;
  --on-bear: #ffffff;
  --focus: #1d4ed8;
  --overlay-weak: rgba(15, 23, 42, 0.05);
  --overlay-medium: rgba(15, 23, 42, 0.08);
  --overlay-strong: rgba(15, 23, 42, 0.15);
}

@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    color-scheme: light;
    --bg: #f8fafc;
    --surface: #ffffff;
    --surface-2: #f1f5f9;
    --text: #0f172a;
    --text-2: #334155;
    --muted: #475569;
    --border: #94a3b8;
    --border-strong: #64748b;
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-text: #ffffff;
    --link: #1d4ed8;
    --link-hover: #1e3a8a;
    --bull: #15803d;
    --bear: #b91c1c;
    --warn: #b45309;
    --info: #0369a1;
    --ok: #15803d;
    --err: #b91c1c;
    --on-bull: #ffffff;
    --on-bear: #ffffff;
    --focus: #1d4ed8;
    --overlay-weak: rgba(15, 23, 42, 0.05);
    --overlay-medium: rgba(15, 23, 42, 0.08);
    --overlay-strong: rgba(15, 23, 42, 0.15);
  }
}

/* --------------------------------------------------------------------------
   Static-tree aliases: the legacy names theme.css / styles.css / page CSS use,
   mapped onto the tokens so every old rule follows the one palette.
   (The Next app uses --color-* names; these do not collide.)
   -------------------------------------------------------------------------- */
:root {
  --bg-elevated: var(--surface);
  --bg-sunken: var(--bg);
  --panel: var(--surface);
  --panel-2: var(--surface-2);
  --fg: var(--text);
  --fg-secondary: var(--text-2);
  --fg-inverse: var(--bg);
  --border-light: var(--surface-2);
  /* --primary was the green "long / positive" colour AND the button fill.
     It stays the positive colour; buttons now use --accent. */
  --primary: var(--bull);
  --primary-hover: var(--bull);
  --primary-600: var(--bull);
  --primary-dark: var(--bull);
  --on-primary: var(--on-bull);
  --danger: var(--bear);
  --danger-hover: var(--bear);
  --on-danger: var(--on-bear);
  --on-accent: var(--accent-text);
  --on-warn: #1c1204;
}