/* ========================================
   DESIGN SYSTEM — Professional Dark Theme
   ======================================== */

:root {
    --bg-primary: #0a0e14;
    --bg-secondary: #12161e;
    --bg-tertiary: #1a1f2b;
    --bg-elevated: #1e2433;
    --accent-blue: #58a6ff;
    --accent-cyan: #3dd6f5;
    --text-primary: #e6edf3;
    --text-secondary: #8b949e;
    --text-muted: #484f58;
    --border-color: #21262d;
    --border-subtle: rgba(255, 255, 255, 0.06);
    --bullish: #2ea043;
    --bullish-bright: #3fb950;
    --bullish-bg: rgba(46, 160, 67, 0.12);
    --bearish: #f85149;
    --bearish-bright: #ff7b72;
    --bearish-bg: rgba(248, 81, 73, 0.12);
    --glow-green: 0 0 12px rgba(46, 160, 67, 0.4);
    --glow-red: 0 0 12px rgba(248, 81, 73, 0.4);
    --glow-blue: 0 0 12px rgba(88, 166, 255, 0.3);
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 1px rgba(255, 255, 255, 0.05);
    --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.4);
    --transition-fast: 0.15s ease;
    --transition-med: 0.25s ease;
}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Monospace numbers */
.mono-num {
    font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
    font-variant-numeric: tabular-nums;
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #30363d; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #484f58; }

/* ─── Materialize Overrides ─── */

.switch label { color: var(--text-secondary); font-size: 0.85rem; }
.switch label .lever { background-color: var(--bg-tertiary); }
.switch label .lever:after { background-color: var(--text-muted); }
.switch label input[type=checkbox]:checked+.lever { background-color: rgba(88, 166, 255, 0.35); }
.switch label input[type=checkbox]:checked+.lever:after { background-color: var(--accent-blue); }

[type="radio"]:checked+span:after,
[type="radio"].with-gap:checked+span:after {
    background-color: var(--accent-blue);
    border: 2px solid var(--accent-blue);
}