/* ═══════════════════════════════════════════════════════════════════════════
   V4 THEME TOKENS — All themes except Amber (amber is in critical.css)
   Loaded async — themes switch instantly since CSS vars are inherited
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="phosphor"] {
    /* Primary Colors */
    --v4-primary: #33FF33;
    --v4-primary-dim: #22CC22;
    --v4-primary-bright: #66FF66;
    --v4-primary-glow: rgba(51, 255, 51, 0.5);
    --v4-primary-subtle: rgba(51, 255, 51, 0.1);
    
    /* Backgrounds */
    --v4-bg-darkest: #000000;
    --v4-bg-darker: #050A05;
    --v4-bg-dark: #0A0F0A;
    --v4-bg-base: #0D140D;
    --v4-bg-elevated: #141F14;
    --v4-bg-surface: #1A281A;
    --v4-bg-panel: rgba(20, 31, 20, 0.95);
    
    /* Text */
    --v4-text-primary: #EEFFEE;
    --v4-text-secondary: #88CC88;
    --v4-text-muted: #557755;
    --v4-text-disabled: #334433;
    
    /* Accents */
    --v4-accent-green: #33FF33;
    --v4-accent-red: #FF5555;
    --v4-accent-blue: #55AAFF;
    
    /* Borders */
    --v4-border-dim: rgba(51, 255, 51, 0.15);
    --v4-border-base: rgba(51, 255, 51, 0.3);
    --v4-border-bright: rgba(51, 255, 51, 0.6);
    
    /* Effects */
    --v4-glow-primary: 0 0 10px rgba(51, 255, 51, 0.4), 0 0 30px rgba(51, 255, 51, 0.2);
    --v4-glow-text: 0 0 8px rgba(51, 255, 51, 0.6);
    --v4-glow-strong: 0 0 20px rgba(51, 255, 51, 0.6), 0 0 40px rgba(51, 255, 51, 0.3);
    
    /* Screen Effects */
    --v4-scanline-color: rgba(0, 0, 0, 0.15);
    --v4-screen-glow: radial-gradient(ellipse at center, rgba(51, 255, 51, 0.1) 0%, transparent 70%);
    --v4-crt-vignette: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.4) 100%);
}


[data-theme="paper"] {
    /* Primary Colors */
    --v4-primary: #8B4513;
    --v4-primary-dim: #6B3410;
    --v4-primary-bright: #A0522D;
    --v4-primary-glow: rgba(139, 69, 19, 0.3);
    --v4-primary-subtle: rgba(139, 69, 19, 0.08);
    
    /* Backgrounds */
    --v4-bg-darkest: #E8E0D0;
    --v4-bg-darker: #EDE5D5;
    --v4-bg-dark: #F2EAD9;
    --v4-bg-base: #F5F0E6;
    --v4-bg-elevated: #FFFAF0;
    --v4-bg-surface: #FFFFFF;
    --v4-bg-panel: rgba(255, 250, 240, 0.97);
    
    /* Text - WCAG AA compliant (≥4.5:1 contrast) */
    --v4-text-primary: #2D2D2D;
    --v4-text-secondary: #5C4033;
    --v4-text-muted: #6B5744;  /* Darkened for 4.8:1 contrast ratio */
    --v4-text-disabled: #B8A890;  /* Disabled elements exempt from contrast requirements */
    
    /* Accents */
    --v4-accent-green: #228B22;
    --v4-accent-red: #B22222;
    --v4-accent-blue: #4682B4;
    
    /* Borders */
    --v4-border-dim: rgba(139, 69, 19, 0.15);
    --v4-border-base: rgba(139, 69, 19, 0.25);
    --v4-border-bright: rgba(139, 69, 19, 0.4);
    
    /* Effects - More subtle for light theme */
    --v4-glow-primary: 0 2px 8px rgba(139, 69, 19, 0.15);
    --v4-glow-text: none;
    --v4-glow-strong: 0 4px 16px rgba(139, 69, 19, 0.2);
    
    /* Screen Effects - Disabled for paper */
    --v4-scanline-color: transparent;
    --v4-screen-glow: none;
    --v4-crt-vignette: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT THEMES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Slate Theme - Clean, professional monochrome */
[data-theme="slate"] {
    /* Primary Colors */
    --v4-primary: #475569;
    --v4-primary-dim: #334155;
    --v4-primary-bright: #64748B;
    --v4-primary-glow: rgba(71, 85, 105, 0.3);
    --v4-primary-subtle: rgba(71, 85, 105, 0.08);
    
    /* Backgrounds */
    --v4-bg-darkest: #E2E8F0;
    --v4-bg-darker: #EDF1F5;
    --v4-bg-dark: #F1F5F9;
    --v4-bg-base: #F8FAFC;
    --v4-bg-elevated: #FCFDFE;
    --v4-bg-surface: #FFFFFF;
    --v4-bg-panel: rgba(252, 253, 254, 0.97);
    
    /* Text */
    --v4-text-primary: #0F172A;
    --v4-text-secondary: #1E293B;
    --v4-text-muted: #475569;
    --v4-text-disabled: #94A3B8;
    
    /* Accents */
    --v4-accent-green: #059669;
    --v4-accent-red: #DC2626;
    --v4-accent-blue: #2563EB;
    
    /* Borders */
    --v4-border-dim: rgba(71, 85, 105, 0.12);
    --v4-border-base: rgba(71, 85, 105, 0.2);
    --v4-border-bright: rgba(71, 85, 105, 0.35);
    
    /* Effects - Subtle for light theme */
    --v4-glow-primary: 0 2px 8px rgba(71, 85, 105, 0.12);
    --v4-glow-text: none;
    --v4-glow-strong: 0 4px 16px rgba(71, 85, 105, 0.15);
    
    /* Screen Effects - Disabled for light */
    --v4-scanline-color: transparent;
    --v4-screen-glow: none;
    --v4-crt-vignette: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   DARK THEMES (Additional)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Arctic Theme - Ice cold blue CRT display */
[data-theme="arctic"] {
    /* Primary Colors */
    --v4-primary: #38BDF8;
    --v4-primary-dim: #0EA5E9;
    --v4-primary-bright: #7DD3FC;
    --v4-primary-glow: rgba(56, 189, 248, 0.5);
    --v4-primary-subtle: rgba(56, 189, 248, 0.1);
    
    /* Backgrounds */
    --v4-bg-darkest: #000408;
    --v4-bg-darker: #020B10;
    --v4-bg-dark: #041018;
    --v4-bg-base: #071520;
    --v4-bg-elevated: #0C1E2B;
    --v4-bg-surface: #122838;
    --v4-bg-panel: rgba(12, 30, 43, 0.95);
    
    /* Text */
    --v4-text-primary: #E0F7FF;
    --v4-text-secondary: #7DD3FC;
    --v4-text-muted: #4A9EC7;
    --v4-text-disabled: #2D5A78;
    
    /* Accents */
    --v4-accent-green: #22D3EE;
    --v4-accent-red: #F87171;
    --v4-accent-blue: #38BDF8;
    
    /* Borders */
    --v4-border-dim: rgba(56, 189, 248, 0.15);
    --v4-border-base: rgba(56, 189, 248, 0.3);
    --v4-border-bright: rgba(56, 189, 248, 0.6);
    
    /* Effects */
    --v4-glow-primary: 0 0 10px rgba(56, 189, 248, 0.4), 0 0 30px rgba(56, 189, 248, 0.2);
    --v4-glow-text: 0 0 8px rgba(56, 189, 248, 0.6);
    --v4-glow-strong: 0 0 20px rgba(56, 189, 248, 0.6), 0 0 40px rgba(56, 189, 248, 0.3);
    
    /* Screen Effects */
    --v4-scanline-color: rgba(0, 0, 0, 0.12);
    --v4-screen-glow: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.08) 0%, transparent 70%);
    --v4-crt-vignette: radial-gradient(ellipse at center, transparent 40%, rgba(0, 4, 8, 0.5) 100%);
}

/* Cyan Theme - Electric sci-fi terminal */
[data-theme="cyan"] {
    /* Primary Colors */
    --v4-primary: #22D3EE;
    --v4-primary-dim: #06B6D4;
    --v4-primary-bright: #67E8F9;
    --v4-primary-glow: rgba(34, 211, 238, 0.5);
    --v4-primary-subtle: rgba(34, 211, 238, 0.1);
    
    /* Backgrounds */
    --v4-bg-darkest: #000505;
    --v4-bg-darker: #030A0B;
    --v4-bg-dark: #061012;
    --v4-bg-base: #081517;
    --v4-bg-elevated: #0D1F22;
    --v4-bg-surface: #132A2E;
    --v4-bg-panel: rgba(13, 31, 34, 0.95);
    
    /* Text */
    --v4-text-primary: #E0FEFF;
    --v4-text-secondary: #67E8F9;
    --v4-text-muted: #45A5B0;
    --v4-text-disabled: #2A6670;
    
    /* Accents */
    --v4-accent-green: #4ADE80;
    --v4-accent-red: #F87171;
    --v4-accent-blue: #22D3EE;
    
    /* Borders */
    --v4-border-dim: rgba(34, 211, 238, 0.15);
    --v4-border-base: rgba(34, 211, 238, 0.3);
    --v4-border-bright: rgba(34, 211, 238, 0.6);
    
    /* Effects */
    --v4-glow-primary: 0 0 10px rgba(34, 211, 238, 0.4), 0 0 30px rgba(34, 211, 238, 0.2);
    --v4-glow-text: 0 0 8px rgba(34, 211, 238, 0.6);
    --v4-glow-strong: 0 0 20px rgba(34, 211, 238, 0.6), 0 0 40px rgba(34, 211, 238, 0.3);
    
    /* Screen Effects */
    --v4-scanline-color: rgba(0, 0, 0, 0.12);
    --v4-screen-glow: radial-gradient(ellipse at center, rgba(34, 211, 238, 0.08) 0%, transparent 70%);
    --v4-crt-vignette: radial-gradient(ellipse at center, transparent 40%, rgba(0, 5, 5, 0.5) 100%);
}

/* Matrix Theme - Classic bright matrix green */
[data-theme="matrix"] {
    /* Primary Colors */
    --v4-primary: #00FF41;
    --v4-primary-dim: #00CC33;
    --v4-primary-bright: #50FF7D;
    --v4-primary-glow: rgba(0, 255, 65, 0.5);
    --v4-primary-subtle: rgba(0, 255, 65, 0.1);
    
    /* Backgrounds */
    --v4-bg-darkest: #000000;
    --v4-bg-darker: #000800;
    --v4-bg-dark: #001000;
    --v4-bg-base: #001500;
    --v4-bg-elevated: #002000;
    --v4-bg-surface: #002800;
    --v4-bg-panel: rgba(0, 32, 0, 0.95);
    
    /* Text */
    --v4-text-primary: #DFFFDF;
    --v4-text-secondary: #50FF7D;
    --v4-text-muted: #30AA50;
    --v4-text-disabled: #206030;
    
    /* Accents */
    --v4-accent-green: #00FF41;
    --v4-accent-red: #FF3333;
    --v4-accent-blue: #00BFFF;
    
    /* Borders */
    --v4-border-dim: rgba(0, 255, 65, 0.15);
    --v4-border-base: rgba(0, 255, 65, 0.3);
    --v4-border-bright: rgba(0, 255, 65, 0.6);
    
    /* Effects */
    --v4-glow-primary: 0 0 10px rgba(0, 255, 65, 0.4), 0 0 30px rgba(0, 255, 65, 0.2);
    --v4-glow-text: 0 0 8px rgba(0, 255, 65, 0.7);
    --v4-glow-strong: 0 0 20px rgba(0, 255, 65, 0.6), 0 0 40px rgba(0, 255, 65, 0.3);
    
    /* Screen Effects */
    --v4-scanline-color: rgba(0, 0, 0, 0.15);
    --v4-screen-glow: radial-gradient(ellipse at center, rgba(0, 255, 65, 0.1) 0%, transparent 70%);
    --v4-crt-vignette: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.5) 100%);
}


[data-theme="paper"] .v4-body,
[data-theme="slate"] .v4-body {
    background-image: 
        url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E"),
        linear-gradient(to bottom, var(--v4-bg-base) 0%, var(--v4-bg-darker) 100%);
}