/* ── DailyTrader tokens — shared by the app, landing, welcome and legal pages ──
 *
 * The concept is a futures trader's price ladder: plan levels stacked above
 * and below, price riding between them, every decision a distance to the next
 * line. So the interface is built from hairlines, not boxes.
 *
 * Colour rule, one meaning each:
 *   up (mint)    = upside, long, a win, a level that held
 *   down (red)   = downside, short, a loss, a stop
 *   attn (amber) = attention: an event, the gamma flip, a warning
 *   accent (blue)= the interface's own voice — links, focus, primary action,
 *                  current location. Never data.
 *   ink          = everything else, including price itself.
 *
 * Legacy variable names (--bg-card, --green, --purple …) are aliased below so
 * existing CSS and gamma.js's getPropertyValue reads keep working.
 */
:root {
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius: 4px; /* controls only: buttons, inputs, toggles */
  --radius-lg: 0px; /* panels have no radius — they are separated by hairlines */
}

/* ── Dark (default) ── panels sit ON the ground: same paint, hairline edge */
:root,
[data-theme='dark'] {
  --ground: #0b0c0e;
  --panel: #0b0c0e;
  --raised: #15171a; /* things that genuinely float: menus, modals, toasts */
  --hover: #181a1e;
  --line: rgba(255, 255, 255, 0.085);
  --line-strong: rgba(255, 255, 255, 0.17);

  --ink: #eceef0;
  --ink-2: #a4a9b1;
  --ink-3: #8a8f98;

  --accent: #6ea8ff;
  --accent-rgb: 110, 168, 255;
  --on-accent: #07111f;
  --up: #3ddc97;
  --up-rgb: 61, 220, 151;
  --down: #ff6161;
  --down-rgb: 255, 97, 97;
  --attn: #f2b33d;
  --attn-rgb: 242, 179, 61;
  --up-tint: rgba(61, 220, 151, 0.12);
  --down-tint: rgba(255, 97, 97, 0.12);

  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--line);
  color-scheme: dark;
}

/* ── Light ── panels lift OFF the ground: lighter than it */
[data-theme='light'] {
  --ground: #f3f3f1;
  --panel: #ffffff;
  --raised: #ffffff;
  --hover: #ececea;
  --line: rgba(20, 22, 26, 0.1);
  --line-strong: rgba(20, 22, 26, 0.2);

  --ink: #16181b;
  --ink-2: #545961;
  --ink-3: #686d76;

  --accent: #1f5fd6;
  --accent-rgb: 31, 95, 214;
  --on-accent: #ffffff;
  --up: #0c8556;
  --up-rgb: 12, 133, 86;
  --down: #cc2f36;
  --down-rgb: 204, 47, 54;
  --attn: #9a6200;
  --attn-rgb: 154, 98, 0;
  --up-tint: #e2f3eb;
  --down-tint: #fbe7e7;

  --shadow-float: 0 10px 32px rgba(20, 22, 26, 0.12), 0 0 0 1px var(--line);
  color-scheme: light;
}

/* ── Legacy aliases (both themes resolve through the tokens above) ── */
:root,
[data-theme='dark'],
[data-theme='light'] {
  --bg-base: var(--ground);
  --bg-surface: var(--panel);
  --bg-card: var(--panel);
  --bg-elevated: var(--raised);
  --bg-hover: var(--hover);
  --surface-alt: var(--hover);
  --border: var(--line);
  --border-bright: var(--line-strong);
  --card-sheen: none;

  --text: var(--ink);
  --text-muted: var(--ink-2);
  --text-subtle: var(--ink-3);

  --accent-dim: rgba(var(--accent-rgb), 0.1);
  --accent-glow: rgba(var(--accent-rgb), 0.28);

  --green: var(--up);
  --green-dim: rgba(var(--up-rgb), 0.12);
  --red: var(--down);
  --red-dim: rgba(var(--down-rgb), 0.12);
  --warn: var(--attn);
  --yellow: var(--attn);
  --yellow-dim: rgba(var(--attn-rgb), 0.12);
  --orange: var(--attn);
  --orange-dim: rgba(var(--attn-rgb), 0.12);
  /* purple was only ever decoration (gradients, the Pro badge); it now
     speaks with the interface's voice */
  --purple: var(--accent);
  --purple-dim: var(--accent-dim);

  --shadow: var(--shadow-float);
  --shadow-sm: none;
  --shadow-accent: none;
}

html {
  background: var(--ground);
  font-family: var(--font);
  font-optical-sizing: auto;
}

/* Tabular figures wherever numbers are the content. Not global: in Inter,
   tnum also widens the hyphen, so prose like "Pre-Market" would gap. */
.mono,
table,
input,
time,
[class*='val'],
[class*='pnl'],
[class*='price'],
[class*='num'],
[class*='clock'] {
  font-variant-numeric: tabular-nums;
}