/* ============================================
   CTC DASH — Design Tokens
   Light & Dark theme CSS custom properties
   ============================================ */

/* ============================================
   TRADE-IN ANALYZER — Design System
   Aesthetic: Dealership-branded automotive
   Brand Colors: #00A651 / #007A3D / #0070C0
   Modes: Light (default) / Dark
   ============================================ */

/* --- Design Tokens: Light Theme (default) --- */
:root, [data-theme="light"] {
    /* Surface palette — warm off-white / paper */
    --surface-0: #f5f3ef;
    --surface-1: #ffffff;
    --surface-2: #f9f8f6;
    --surface-3: #f0eee9;
    --surface-4: #e6e3dd;
    --surface-hover: #eeece7;

    /* Accent — dealership brand green */
    --accent: #00A651;
    --accent-bright: #00b85a;
    --accent-deep: #007A3D;
    --accent-dim: #006830;
    --accent-glow: rgba(0, 166, 81, 0.1);
    --accent-glow-strong: rgba(0, 166, 81, 0.18);

    /* Secondary accent — brand blue */
    --secondary: #0070C0;
    --secondary-dim: rgba(0, 112, 192, 0.08);

    /* Brand light tint */
    --brand-tint: #EAFCEA;
    --brand-tint-alpha: rgba(234, 252, 234, 0.5);

    /* Text — rich, dark */
    --text-primary: #1a1f1b;
    --text-secondary: #5a6359;
    --text-muted: #959e95;
    --text-inverse: #ffffff;

    /* Borders */
    --border-subtle: rgba(0, 0, 0, 0.06);
    --border-default: rgba(0, 0, 0, 0.1);
    --border-strong: rgba(0, 0, 0, 0.16);
    --border-accent: rgba(0, 166, 81, 0.25);

    /* Nav backdrop */
    --nav-bg: rgba(245, 243, 239, 0.88);
    --nav-active-bg: rgba(0, 166, 81, 0.08);
    --nav-active-color: #007A3D;

    /* Grades — deeper for light bg legibility */
    --grade-excellent: #10b981;
    --grade-good: #3b82f6;
    --grade-fair: #f59e0b;
    --grade-poor: #ef4444;
    --grade-rough: #8b5cf6;
    --grade-none: #9ca3af;

    /* Score bar spectrum: red → orange → amber → lime → green */
    --score-high: #10b981;
    --score-mid-high: #84cc16;
    --score-mid: #eab308;
    --score-mid-low: #f97316;
    --score-low: #ef4444;

    /* Status */
    --status-success: #059669;
    --status-warning: #d97706;
    --status-danger: #dc2626;
    --status-info: #2563eb;

    /* Disposition */
    --disp-pending: #6b7280;
    --disp-recondition: #2563eb;
    --disp-wholesale: #ea580c;

    /* Severity */
    --sev-minor: #d97706;
    --sev-moderate: #ea580c;
    --sev-severe: #dc2626;

    /* Typography */
    --font-display: 'Outfit', system-ui, sans-serif;
    --font-body: 'DM Sans', system-ui, sans-serif;
    --font-mono: 'DM Mono', 'Fira Code', ui-monospace, monospace;

    /* Sizing */
    --container-max: 1280px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Shadows — softer for light mode */
    --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
    --shadow-elevated: 0 4px 12px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.06);
    --shadow-glow: 0 0 20px var(--accent-glow);

    /* Grain opacity */
    --grain-opacity: 0.015;

    /* Code */
    --code-bg: #f0eee9;
    --code-color: #007A3D;
}

/* --- Design Tokens: Dark Theme --- */
[data-theme="dark"] {
    /* Surface palette — deep charcoal/near-black */
    --surface-0: #090b0a;
    --surface-1: #0f1310;
    --surface-2: #151a16;
    --surface-3: #1c221d;
    --surface-4: #252c26;
    --surface-hover: #282f29;

    /* Accent — dealership brand green */
    --accent: #00A651;
    --accent-bright: #2DD171;
    --accent-deep: #007A3D;
    --accent-dim: #006830;
    --accent-glow: rgba(0, 166, 81, 0.15);
    --accent-glow-strong: rgba(0, 166, 81, 0.28);

    /* Secondary accent — brand blue */
    --secondary: #0070C0;
    --secondary-dim: rgba(0, 112, 192, 0.15);

    /* Brand light tint */
    --brand-tint: #EAFCEA;
    --brand-tint-alpha: rgba(234, 252, 234, 0.04);

    /* Text */
    --text-primary: #e4e8e5;
    --text-secondary: #8f9a90;
    --text-muted: #525e53;
    --text-inverse: #090b0a;

    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.16);
    --border-accent: rgba(0, 166, 81, 0.3);

    /* Nav backdrop */
    --nav-bg: rgba(9, 11, 10, 0.88);
    --nav-active-bg: rgba(0, 166, 81, 0.15);
    --nav-active-color: #2DD171;

    /* Grades — brighter for dark bg */
    --grade-excellent: #34d399;
    --grade-good: #60a5fa;
    --grade-fair: #fbbf24;
    --grade-poor: #f87171;
    --grade-rough: #a78bfa;
    --grade-none: #6b7280;

    /* Score bar spectrum: red → orange → amber → lime → green */
    --score-high: #34d399;
    --score-mid-high: #a3e635;
    --score-mid: #facc15;
    --score-mid-low: #fb923c;
    --score-low: #f87171;

    /* Status */
    --status-success: #34d399;
    --status-warning: #fbbf24;
    --status-danger: #f87171;
    --status-info: #60a5fa;

    /* Disposition */
    --disp-pending: #6b7280;
    --disp-recondition: #60a5fa;
    --disp-wholesale: #fb923c;

    /* Severity */
    --sev-minor: #fbbf24;
    --sev-moderate: #fb923c;
    --sev-severe: #f87171;

    /* Shadows — stronger for dark mode */
    --shadow-card: 0 1px 3px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3);
    --shadow-elevated: 0 4px 12px rgba(0,0,0,0.5), 0 12px 40px rgba(0,0,0,0.4);
    --shadow-glow: 0 0 24px var(--accent-glow);

    /* Grain opacity */
    --grain-opacity: 0.022;

    /* Code */
    --code-bg: #1c221d;
    --code-color: #2DD171;
}