/* ============================================================
   theme.css
   CSS custom properties (:root), light theme,
   theme toggle styles.
   ============================================================ */

/* ── Theme CSS Custom Properties ── */
:root {
    /* Backgrounds */
    --bg-primary: #0a0a0a;
    --bg-secondary: #0d0d0d;
    --bg-tertiary: #111;
    --bg-card: #0a0a0a;
    --bg-tooltip: #1a1a2e;
    --bg-popup: #1a1a1a;
    --bg-overlay: rgba(0, 0, 0, 0.75);
    --bg-error: #450a0a;
    --bg-disabled: #080808;
    --bg-subtle: rgba(255, 255, 255, 0.04);
    --bg-subtle-2: rgba(255, 255, 255, 0.02);
    --bg-subtle-3: rgba(255, 255, 255, 0.03);

    /* Text */
    --text-primary: #fff;
    --text-secondary: #ccc;
    --text-tertiary: #aaa;
    --text-muted: #888;
    --text-dim: #666;
    --text-disabled: #555;
    --text-body: #4ea8ff;

    /* Accent Colors */
    --accent-blue: #60a5fa;
    --accent-blue-light: #4ea8ff;
    --accent-blue-pale: #b8d4f8;
    --accent-blue-bright: #e8eeff;
    --accent-blue-muted: #7a9cc6;
    --accent-blue-soft: #8bb8f0;
    --accent-blue-softer: #a8ccf5;
    --accent-blue-icy: #dce6fa;
    --accent-blue-deep: #1d4ed8;
    --accent-blue-medium: #3b82f6;
    --accent-cyan: #06b6d4;
    --accent-purple: #a78bfa;
    --accent-periwinkle: #c7d2fe;

    /* Semantic Colors (kept neon) */
    --call-color: #19fe8f;
    --put-color: #d10000;
    --call-soft: #22c55e;
    --put-soft: #ef4444;
    --put-darker: #dc2626;
    --call-stat: #c0eecd;
    --put-stat: #eec0c0;
    --warm-color: #f59e0b;
    --warm-darker: #d97706;
    --mixed-color: #ffaa00;

    /* Title */
    --title-color: #c8d8e8;
    --title-sub: #8aa4c0;
    --title-divider: rgba(150, 180, 220, 0.4);

    /* Borders */
    --border-subtle: rgba(96, 165, 250, 0.15);
    --border-medium: rgba(96, 165, 250, 0.35);
    --border-strong: rgba(96, 165, 250, 0.5);
    --border-active: rgba(232, 238, 255, 0.45);

    /* Shadows & Glows */
    --glow-blue: rgba(96, 165, 250, 0.12);
    --glow-blue-soft: rgba(96, 165, 250, 0.06);
    --glow-blue-strong: rgba(96, 165, 250, 0.25);
    --shadow-dark: rgba(0, 0, 0, 0.5);
    --shadow-tooltip: 0 4px 20px rgba(0, 0, 0, 0.5);

    /* Tables */
    --table-border: #333;
    --table-hover: #252525;
    --table-header-hover: #0e0e0e;
    --table-header-color: #787b86;

    /* Chart */
    --chart-bg: #0a0a0a;
    --chart-text: #787b86;
    --chart-border: #191919;
    --chart-candle-up: #d1d5db;
    --chart-candle-down: #1a1a1a;
    --chart-candle-border-up: #9ca3af;
    --chart-candle-border-down: #6b7280;

    /* Canvas */
    --canvas-bird-r: 80;
    --canvas-bird-g: 160;
    --canvas-bird-b: 255;
    --canvas-node-r: 80;
    --canvas-node-g: 160;
    --canvas-node-b: 255;

    /* Misc */
    --text-shadow-body: 0 0 8px rgba(78, 168, 255, 0.15);
    --text-shadow-title: 0 0 10px rgba(78, 168, 255, 0.4), 0 0 30px rgba(78, 168, 255, 0.2);
    --color-scheme: dark;
    --splitter-bg: rgba(10, 10, 10, 0.7);
    --bar-fill-text: rgba(255, 255, 255, 0.85);
    --gv-spot-bg: #fff;
    --gv-bar-val: rgba(255, 255, 255, 0.7);
}

/* ── Light Theme ── */
[data-theme="light"] {
    /* Backgrounds */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #e2e8f0;
    --bg-card: #ffffff;
    --bg-tooltip: #f0f4ff;
    --bg-popup: #ffffff;
    --bg-overlay: rgba(0, 0, 0, 0.25);
    --bg-error: #fef2f2;
    --bg-disabled: #f1f5f9;
    --bg-subtle: rgba(0, 0, 0, 0.03);
    --bg-subtle-2: rgba(0, 0, 0, 0.02);
    --bg-subtle-3: rgba(0, 0, 0, 0.015);

    /* Text */
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-tertiary: #64748b;
    --text-muted: #64748b;
    --text-dim: #94a3b8;
    --text-disabled: #cbd5e1;
    --text-body: #2563eb;

    /* Accent Colors */
    --accent-blue: #2563eb;
    --accent-blue-light: #3b82f6;
    --accent-blue-pale: #1d4ed8;
    --accent-blue-bright: #0f172a;
    --accent-blue-muted: #3b82f6;
    --accent-blue-soft: #2563eb;
    --accent-blue-softer: #1d4ed8;
    --accent-blue-icy: #1e3a5f;
    --accent-blue-deep: #1d4ed8;
    --accent-blue-medium: #2563eb;
    --accent-cyan: #0891b2;
    --accent-purple: #7c3aed;
    --accent-periwinkle: #6366f1;

    /* Semantic Colors (darker for readability on white) */
    --call-color: #059669;
    --put-color: #dc2626;
    --call-soft: #16a34a;
    --put-soft: #ef4444;
    --put-darker: #b91c1c;
    --call-stat: #047857;
    --put-stat: #b91c1c;
    --warm-color: #d97706;
    --warm-darker: #b45309;
    --mixed-color: #d97706;

    /* Title */
    --title-color: #1e293b;
    --title-sub: #475569;
    --title-divider: rgba(30, 41, 59, 0.25);

    /* Borders */
    --border-subtle: rgba(37, 99, 235, 0.35);
    --border-medium: rgba(37, 99, 235, 0.5);
    --border-strong: rgba(37, 99, 235, 0.65);
    --border-active: rgba(37, 99, 235, 0.7);

    /* Shadows & Glows */
    --glow-blue: rgba(37, 99, 235, 0.08);
    --glow-blue-soft: rgba(37, 99, 235, 0.04);
    --glow-blue-strong: rgba(37, 99, 235, 0.15);
    --shadow-dark: rgba(0, 0, 0, 0.08);
    --shadow-tooltip: 0 4px 20px rgba(0, 0, 0, 0.12);

    /* Tables */
    --table-border: rgba(37, 99, 235, 0.25);
    --table-hover: #f1f5f9;
    --table-header-hover: #f8fafc;
    --table-header-color: #64748b;

    /* Chart */
    --chart-bg: #ffffff;
    --chart-text: #64748b;
    --chart-border: rgba(37, 99, 235, 0.25);
    --chart-candle-up: #16a34a;
    --chart-candle-down: #dc2626;
    --chart-candle-border-up: #15803d;
    --chart-candle-border-down: #b91c1c;

    /* Canvas */
    --canvas-bird-r: 37;
    --canvas-bird-g: 99;
    --canvas-bird-b: 235;
    --canvas-node-r: 37;
    --canvas-node-g: 99;
    --canvas-node-b: 235;

    /* Misc */
    --text-shadow-body: none;
    --text-shadow-title: none;
    --color-scheme: light;
    --splitter-bg: rgba(255, 255, 255, 0.9);
    --bar-fill-text: rgba(255, 255, 255, 0.95);
    --gv-spot-bg: #0f172a;
    --gv-bar-val: rgba(0, 0, 0, 0.6);
}

/* ── Theme Toggle ── */
.theme-toggle {
    position: fixed;
    bottom: 12px;
    right: 100px;
    z-index: 9999;
    background: var(--splitter-bg);
    border: 1px solid var(--border-subtle);
    color: var(--accent-blue);
    font-size: 0.7rem;
    font-family: 'SF Mono', Monaco, monospace;
    padding: 4px 8px;
    border-radius: 3px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s, background 0.3s, color 0.3s;
}
.theme-toggle:hover {
    opacity: 1;
}

/* Light mode canvas adjustment */
[data-theme="light"] #matrix-canvas {
    opacity: 0.7;
}

/* Light mode: disable neon pulse animations, keep accent colors readable */
[data-theme="light"] .stat-value {
    animation: none;
}

/* Light mode transitions for smooth switching */
.stat-card,
.pair-analysis,
.progress-panel,
.splitter-popup,
.constraint,
button,
input[type="date"],
select {
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}