/* =============================================================================
   Design Tokens — MyScanity
   Single source of truth for colors, spacing, typography, and effects.
   ============================================================================= */

:root {
    /* ── Color Palette ──────────────────────────────────────────────────────── */

    /* Backgrounds */
    --bg-dark: #0f1115;
    --bg-card: rgba(26, 30, 38, 0.7);
    --bg-input: rgba(33, 38, 48, 0.8);
    --bg-overlay: rgba(15, 17, 21, 0.85);
    --bg-overlay-heavy: rgba(15, 17, 21, 0.9);
    --bg-modal: #131722;
    --bg-hover-subtle: rgba(255, 255, 255, 0.02);
    --bg-hover-light: rgba(255, 255, 255, 0.04);
    --bg-hover: rgba(255, 255, 255, 0.05);
    --bg-hover-medium: rgba(255, 255, 255, 0.08);
    --bg-hover-strong: rgba(255, 255, 255, 0.1);
    --bg-active: rgba(255, 255, 255, 0.12);
    --bg-active-strong: rgba(255, 255, 255, 0.15);
    --bg-scrim: rgba(0, 0, 0, 0.5);
    --bg-scrim-heavy: rgba(0, 0, 0, 0.7);
    --bg-scrim-full: rgba(0, 0, 0, 0.9);
    --bg-auth: radial-gradient(circle at center, #1a1e26 0%, #0f1115 100%);
    --bg-auth-card: rgba(26, 30, 38, 0.6);

    /* Borders */
    --border-color: rgba(255, 255, 255, 0.08);
    --border-highlight: rgba(255, 255, 255, 0.15);
    --border-subtle: rgba(255, 255, 255, 0.1);
    --border-hover: rgba(255, 255, 255, 0.3);

    /* Text */
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-dim: #64748b;

    /* ── Accent Colors ──────────────────────────────────────────────────────── */

    /* Blue */
    --accent-blue: #3b82f6;
    --accent-blue-glow: rgba(59, 130, 246, 0.3);
    --accent-blue-bg: rgba(59, 130, 246, 0.1);
    --accent-blue-bg-strong: rgba(59, 130, 246, 0.15);
    --accent-blue-border: rgba(59, 130, 246, 0.2);
    --accent-blue-border-strong: rgba(59, 130, 246, 0.3);

    /* Blue (alternate — softer blue used in profile/hover states) */
    --accent-blue-soft: #58a6ff;
    --accent-blue-soft-bg: rgba(88, 166, 255, 0.06);
    --accent-blue-soft-bg-medium: rgba(88, 166, 255, 0.1);
    --accent-blue-soft-bg-strong: rgba(88, 166, 255, 0.12);
    --accent-blue-soft-bg-active: rgba(88, 166, 255, 0.15);
    --accent-blue-soft-bg-hover: rgba(88, 166, 255, 0.2);
    --accent-blue-soft-border: rgba(88, 166, 255, 0.25);
    --accent-blue-soft-border-strong: rgba(88, 166, 255, 0.3);
    --accent-blue-soft-border-medium: rgba(88, 166, 255, 0.35);
    --accent-blue-soft-glow: rgba(88, 166, 255, 0.3);
    --accent-blue-soft-glow-strong: rgba(88, 166, 255, 0.5);

    /* Green */
    --accent-green: #10b981;
    --accent-green-glow: rgba(16, 185, 129, 0.3);
    --accent-green-dark: #059669;
    --accent-green-alt: #2ea043;
    --accent-green-bg: rgba(63, 185, 80, 0.1);
    --accent-green-bg-strong: rgba(63, 185, 80, 0.15);
    --accent-green-border: rgba(63, 185, 80, 0.3);
    --accent-green-bright: #2fde72;
    --accent-green-bright-bg: rgba(47, 222, 114, 0.08);
    --accent-green-status: #3fb950;
    --accent-green-status-dark: #238636;

    /* Orange / Warning */
    --accent-orange: #f59e0b;
    --accent-orange-bg: rgba(210, 153, 34, 0.08);
    --accent-orange-bg-strong: rgba(210, 153, 34, 0.12);
    --accent-orange-bg-medium: rgba(210, 153, 34, 0.15);
    --accent-orange-border: rgba(210, 153, 34, 0.2);
    --accent-orange-border-strong: rgba(210, 153, 34, 0.25);
    --accent-orange-scrollbar: rgba(210, 153, 34, 0.3);
    --accent-orange-scrollbar-hover: rgba(210, 153, 34, 0.5);

    /* Red / Danger */
    --accent-red: #ef4444;
    --accent-red-bright: #e74c3c;
    --accent-red-bg: rgba(248, 81, 73, 0.1);
    --accent-red-bg-strong: rgba(248, 81, 73, 0.12);
    --accent-red-bg-medium: rgba(248, 81, 73, 0.15);
    --accent-red-bg-hover: rgba(248, 81, 73, 0.2);
    --accent-red-border: rgba(248, 81, 73, 0.25);
    --accent-red-border-strong: rgba(248, 81, 73, 0.3);
    --accent-red-status: #f85149;
    --accent-red-status-dark: #b62324;
    --accent-red-status-medium: #da3633;

    /* Purple */
    --accent-purple: #8b5cf6;
    --accent-purple-light: #a78bfa;
    --accent-purple-bg: rgba(139, 92, 246, 0.12);
    --accent-purple-bg-light: rgba(139, 92, 246, 0.08);
    --accent-purple-border: rgba(139, 92, 246, 0.25);
    --accent-purple-glow: rgba(188, 140, 255, 0.06);

    /* ── Setup-Type Colors ──────────────────────────────────────────────────── */
    --setup-breakout: #0ea5e9;
    --setup-parabolic: #f97316;
    --setup-episodic-pivot: #eab308;
    --setup-supertrend: #a855f7;
    --setup-pullback: #06b6d4;
    --setup-rs-leading: #10b981;
    --setup-vcp: #f43f5e;
    --setup-htf-momentum: #ef6c00;
    --setup-cvi-rebound: #00897b;
    --setup-cvi-sell: #d32f2f;

    /* ── Semantic / Score Colors ─────────────────────────────────────────────── */
    --score-high-border: rgba(38, 166, 154, 0.3);
    --score-medium-border: rgba(255, 193, 7, 0.3);
    --score-low-border: rgba(239, 83, 80, 0.3);

    /* ── Performance Cell Colors ────────────────────────────────────────────── */
    --perf-strong-positive: #2fde72;
    --perf-mild-positive: rgba(63, 185, 80, 0.7);
    --perf-mild-negative: rgba(248, 81, 73, 0.7);
    --perf-strong-negative: #ff4040;
    --perf-strong-negative-bg: rgba(255, 64, 64, 0.08);

    /* ── Toast Colors ───────────────────────────────────────────────────────── */
    --toast-success-from: #238636;
    --toast-success-to: #2ea043;
    --toast-success-border: #3fb950;
    --toast-error-from: #b62324;
    --toast-error-to: #da3633;
    --toast-error-border: #f85149;
    --toast-info-from: #1a5276;
    --toast-info-to: #1f6feb;
    --toast-info-border: #58a6ff;


    /* ── Chart Legend ───────────────────────────────────────────────────────── */
    --chart-legend-bg: rgba(19, 23, 34, 0.85);
    --chart-legend-text: #d1d4dc;
    --chart-caption: #ccc;
    --chart-modal-close: #f1f1f1;
    --chart-modal-close-hover: #bbb;

    /* ── Spacing ────────────────────────────────────────────────────────────── */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    /* ── Radius ─────────────────────────────────────────────────────────────── */
    --radius: 16px;
    --radius-lg: 12px;
    --radius-md: 10px;
    --radius-sm: 6px;

    /* ── Shadows ────────────────────────────────────────────────────────────── */
    --shadow-soft: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px var(--accent-blue-glow);
    --shadow-card: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-modal: 0 0 30px rgba(0, 0, 0, 0.7);
    --shadow-toast: 0 4px 16px rgba(0, 0, 0, 0.4);

    /* ── Effects ────────────────────────────────────────────────────────────── */
    --glass-blur: blur(12px);

    /* ── Typography ─────────────────────────────────────────────────────────── */
    --font-primary: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;

    /* ── Layout ─────────────────────────────────────────────────────────────── */
    --nav-height: 70px;
    --max-width-dashboard: 1400px;
}