/* ============================================
   TSB 5.0 - Design Tokens
   Single source of truth for all pages
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root {
    /* ─────────────────────────────────────────
       Color System - Terminal Dark
       ───────────────────────────────────────── */
    --bg-void: #0a0a0a;
    --bg-primary: #111111;
    --bg-secondary: #161616;
    --bg-elevated: #161616;
    --bg-surface: #1c1c1c;

    /* Glass — solid neutral on #0b0b0b base */
    --glass-bg: #1a1a1a;
    --glass-bg-hover: #202020;
    --glass-border: #222222;
    --glass-border-hover: #2a2a2a;
    --glass-shine: #1a1a1a;
    --glass-bg-chart: #1c1c1c;

    /* Glass transparent (for overlays/modals only) */
    --glass-card: rgba(18, 18, 18, 0.95);

    /* Text */
    --text-primary: #f0f0f2;
    --text-secondary: #9898a0;
    --text-tertiary: #6b6b75;
    --text-muted: #5c5c66;

    /* Accent - Teal */
    --accent: #4DAB9A;
    --accent-secondary: #5BC4B0;
    --accent-glow: rgba(77, 171, 154, 0.4);
    --accent-subtle: rgba(77, 171, 154, 0.08);

    /* Semantic - Profit */
    --green: #22c55e;
    --green-light: #4ade80;
    --green-bg: rgba(34, 197, 94, 0.1);
    --green-border: rgba(34, 197, 94, 0.25);
    --green-glow: rgba(34, 197, 94, 0.5);

    /* Semantic - Loss */
    --red: #ef4444;
    --red-light: #f87171;
    --red-muted: rgba(239, 68, 68, 0.6);
    --red-bg: rgba(239, 68, 68, 0.1);
    --red-border: rgba(239, 68, 68, 0.25);
    --red-glow: rgba(239, 68, 68, 0.5);

    /* Semantic - Warning & Info */
    --warn: #f59e0b;
    --warn-light: #fbbf24;
    --amber: #f59e0b;
    --amber-bg: rgba(245, 158, 11, 0.1);
    --info: #60a5fa;
    --info-light: #93c5fd;
    --blue: #60a5fa;
    --blue-bg: rgba(96, 165, 250, 0.1);

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 120ms;
    --duration-normal: 200ms;
    --duration-slow: 350ms;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);

    /* Landing-specific (nav, hero, CTA) */
    --btn-dark-text: #0a0a0a;
    --nav-blur-bg: rgba(10, 10, 10, 0.8);
    --hero-glow-1: rgba(77, 171, 154, 0.1);
    --hero-glow-2: rgba(77, 171, 154, 0.03);
    --hero-visual-gradient: rgba(77, 171, 154, 0.04);
    --featured-bg-1: rgba(77, 171, 154, 0.06);
    --featured-bg-2: rgba(91, 196, 176, 0.02);
    --featured-border: rgba(77, 171, 154, 0.3);
    --cta-glow-1: rgba(77, 171, 154, 0.06);

    /* Admin-specific semantic colors */
    --accent-emerald: #10b981;
    --accent-emerald-hover: #34d399;
    --accent-emerald-dim: rgba(16, 185, 129, 0.15);
    --accent-amber: #f59e0b;
    --accent-amber-dim: rgba(245, 158, 11, 0.15);
    --accent-red: #ef4444;
    --accent-red-dim: rgba(239, 68, 68, 0.15);
    --accent-blue: #3b82f6;
    --accent-blue-dim: rgba(59, 130, 246, 0.15);
    --accent-purple: #a855f7;
    --accent-purple-dim: rgba(168, 85, 247, 0.15);

    /* Border (admin compat) */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.1);
    --border-hover: rgba(255, 255, 255, 0.15);
}

/* ============================================
   Light Mode
   ============================================ */
html.light,
[data-theme="light"] {
    --bg-void: #fafafa;
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f7;
    --bg-elevated: #ffffff;
    --bg-surface: #f0f0f2;

    --glass-bg: rgba(0, 0, 0, 0.02);
    --glass-bg-hover: rgba(0, 0, 0, 0.04);
    --glass-border: rgba(0, 0, 0, 0.06);
    --glass-border-hover: rgba(0, 0, 0, 0.1);
    --glass-shine: rgba(0, 0, 0, 0.02);
    --glass-bg-chart: #f8f8fa;
    --glass-card: rgba(255, 255, 255, 0.95);

    --text-primary: #09090b;
    --text-secondary: #52525b;
    --text-tertiary: #71717a;
    --text-muted: #a1a1aa;

    --accent: #4DAB9A;
    --accent-secondary: #5BC4B0;
    --accent-glow: rgba(77, 171, 154, 0.3);
    --accent-subtle: rgba(77, 171, 154, 0.1);

    --green: #16a34a;
    --green-light: #22c55e;
    --green-bg: rgba(34, 197, 94, 0.08);
    --green-border: rgba(34, 197, 94, 0.2);
    --green-glow: rgba(34, 197, 94, 0.3);

    --red: #dc2626;
    --red-light: #ef4444;
    --red-muted: rgba(220, 38, 38, 0.7);
    --red-bg: rgba(239, 68, 68, 0.08);
    --red-border: rgba(239, 68, 68, 0.2);
    --red-glow: rgba(239, 68, 68, 0.3);

    --warn: #d97706;
    --warn-light: #f59e0b;
    --amber: #d97706;
    --amber-bg: rgba(217, 119, 6, 0.08);
    --info: #2563eb;
    --info-light: #3b82f6;
    --blue: #2563eb;
    --blue-bg: rgba(37, 99, 235, 0.08);

    --btn-dark-text: #ffffff;
    --nav-blur-bg: rgba(250, 250, 250, 0.85);
    --hero-glow-1: rgba(77, 171, 154, 0.08);
    --hero-glow-2: rgba(77, 171, 154, 0.02);
    --hero-visual-gradient: rgba(77, 171, 154, 0.04);
    --featured-bg-1: rgba(77, 171, 154, 0.06);
    --featured-bg-2: rgba(91, 196, 176, 0.02);
    --featured-border: rgba(77, 171, 154, 0.3);
    --cta-glow-1: rgba(77, 171, 154, 0.06);

    --accent-emerald: #059669;
    --accent-emerald-hover: #10b981;
    --accent-emerald-dim: rgba(5, 150, 105, 0.12);
    --accent-amber: #d97706;
    --accent-amber-dim: rgba(217, 119, 6, 0.12);
    --accent-red: #dc2626;
    --accent-red-dim: rgba(220, 38, 38, 0.12);
    --accent-blue: #2563eb;
    --accent-blue-dim: rgba(37, 99, 235, 0.12);
    --accent-purple: #7c3aed;
    --accent-purple-dim: rgba(124, 58, 237, 0.12);

    --border-subtle: rgba(0, 0, 0, 0.06);
    --border-default: rgba(0, 0, 0, 0.1);
    --border-hover: rgba(0, 0, 0, 0.15);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
}