/* ════════════════════════════════════════════════════════
   TGCapital — Design Tokens
   Professional financial-terminal palette (flat, disciplined).
   New semantic tokens (--c-*) drive the redesigned components.
   Legacy tokens (--bg0, --green, …) are kept as aliases so that
   all existing JavaScript-generated markup and inline styles keep
   working without modification.
   ════════════════════════════════════════════════════════ */

/* ── Typography & geometry (theme-independent) ── */
:root {
  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --r: 6px;
  --r-sm: 4px;
  --r-lg: 8px;

  --sidebar-w: 220px;
  --sidebar-w-collapsed: 48px;
  --topbar-h: 52px;
}

/* ── Light mode (default) ── */
:root,
:root[data-theme="light"] {
  --c-page: #f8fafc;
  --c-surface: #ffffff;
  --c-raised: #f1f5f9;
  --c-overlay: #e2e8f0;
  --c-border: rgba(0,0,0,0.08);
  --c-border-hi: rgba(0,0,0,0.14);
  --c-text-0: #0f172a;
  --c-text-1: #475569;
  --c-text-2: #94a3b8;
  --c-accent: #2563eb;
  --c-accent-dim: rgba(37,99,235,0.08);
  --c-green: #16a34a;
  --c-green-dim: rgba(22,163,74,0.08);
  --c-red: #dc2626;
  --c-red-dim: rgba(220,38,38,0.08);
  --c-amber: #d97706;
  --c-amber-dim: rgba(217,119,6,0.08);
  --c-purple: #7c3aed;
  --c-purple-dim: rgba(124,58,237,0.08);
  --c-teal: #0891b2;
  --c-teal-dim: rgba(8,145,178,0.08);
}

/* ── Dark mode (explicit) ── */
:root[data-theme="dark"] {
  --c-page: #0a0c0f;
  --c-surface: #111418;
  --c-raised: #171b21;
  --c-overlay: #1e232b;
  --c-border: rgba(255,255,255,0.08);
  --c-border-hi: rgba(255,255,255,0.14);
  --c-text-0: #f1f5f9;
  --c-text-1: #94a3b8;
  --c-text-2: #475569;
  --c-accent: #3b82f6;
  --c-accent-dim: rgba(59,130,246,0.12);
  --c-green: #16a34a;
  --c-green-dim: rgba(22,163,74,0.12);
  --c-red: #dc2626;
  --c-red-dim: rgba(220,38,38,0.12);
  --c-amber: #d97706;
  --c-amber-dim: rgba(217,119,6,0.12);
  --c-purple: #7c3aed;
  --c-purple-dim: rgba(124,58,237,0.12);
  --c-teal: #0891b2;
  --c-teal-dim: rgba(8,145,178,0.12);
}

/* ── Dark mode (system default, when no explicit theme set) ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --c-page: #0a0c0f;
    --c-surface: #111418;
    --c-raised: #171b21;
    --c-overlay: #1e232b;
    --c-border: rgba(255,255,255,0.08);
    --c-border-hi: rgba(255,255,255,0.14);
    --c-text-0: #f1f5f9;
    --c-text-1: #94a3b8;
    --c-text-2: #475569;
    --c-accent: #3b82f6;
    --c-accent-dim: rgba(59,130,246,0.12);
    --c-green: #16a34a;
    --c-green-dim: rgba(22,163,74,0.12);
    --c-red: #dc2626;
    --c-red-dim: rgba(220,38,38,0.12);
    --c-amber: #d97706;
    --c-amber-dim: rgba(217,119,6,0.12);
    --c-purple: #7c3aed;
    --c-purple-dim: rgba(124,58,237,0.12);
    --c-teal: #0891b2;
    --c-teal-dim: rgba(8,145,178,0.12);
  }
}

/* ── Legacy aliases ──────────────────────────────────────
   Map original variable names used throughout existing
   JavaScript / static markup onto the new palette so that
   zero JavaScript changes are required.                     */
:root {
  --bg0: var(--c-page);
  --bg1: var(--c-surface);
  --bg2: var(--c-raised);
  --bg3: var(--c-overlay);
  --bg4: var(--c-overlay);
  --border: var(--c-border);
  --border-hi: var(--c-border-hi);
  --text0: var(--c-text-0);
  --text1: var(--c-text-1);
  --text2: var(--c-text-2);
  --accent: var(--c-accent);
  --accent-dim: var(--c-accent-dim);
  --green: var(--c-green);
  --green-dim: var(--c-green-dim);
  --red: var(--c-red);
  --red-dim: var(--c-red-dim);
  --amber: var(--c-amber);
  --amber-dim: var(--c-amber-dim);
  --purple: var(--c-purple);
  --purple-dim: var(--c-purple-dim);
  --teal: var(--c-teal);
  --teal-dim: var(--c-teal-dim);
}

/* ── Global reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { color-scheme: light dark; }

body {
  background-color: var(--c-page);
  color: var(--c-text-0);
  font-family: var(--font-ui);
  font-size: 14px;
  min-height: 100vh;
  transition: background-color 0.15s, color 0.15s;
}

/* Numbers, tickers, dates, money — always monospace */
.mono, .kpi-value, .tstat-val, .pos { font-family: var(--font-mono); }

/* ── Accessibility ── */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}