/* === DOCUMENT-THEMES.CSS ===
 * 7 aesthetic themes x dark/light = 14 variants
 * Each theme has unique atmospheric effects (backgrounds, blur, glow)
 * ~650 lines
 */

/* ========================================
 * DEFAULT: Industrial Dark
 * Gradient mesh bg, backdrop blur, gradient borders
 * Fonts: JetBrains Mono + Exo 2
 * ======================================== */
:root {
    --bg-primary: oklch(6% 0.01 250);
    --bg-secondary: oklch(9% 0.01 250);
    --bg-tertiary: oklch(14% 0.01 250);
    --bg-card: rgba(20, 20, 25, 0.8);
    --bg-card-hover: rgba(25, 25, 35, 0.9);
    --bg-input: oklch(5% 0.01 250);
    --hover-bg: rgba(59, 130, 246, 0.08);
    --text-primary: oklch(92% 0 0);
    --text-secondary: oklch(68% 0 0);
    --text-muted: oklch(42% 0 0);
    --color-primary: oklch(62% 0.22 255);
    --color-secondary: oklch(55% 0.25 290);
    --color-primary-dim: rgba(59, 130, 246, 0.12);
    --color-danger: oklch(58% 0.22 25);
    --color-danger-dim: rgba(239, 68, 68, 0.1);
    --color-warning: oklch(72% 0.18 80);
    --color-warning-dim: rgba(245, 158, 11, 0.1);
    --color-info: oklch(55% 0.2 280);
    --color-info-dim: rgba(99, 102, 241, 0.1);
    --color-success: oklch(70% 0.18 160);
    --border-color: rgba(255, 255, 255, 0.08);
    --gradient-accent: linear-gradient(135deg, oklch(62% 0.22 255), oklch(55% 0.25 290));
    --font-display: 'JetBrains Mono', monospace;
    --font-body: 'Exo 2', sans-serif;
    --radius: 8px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 8px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.5);
    --card-bg: rgba(20, 20, 25, 0.8);
    --text-on-primary: #fff;
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Industrial: gradient mesh background */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(139, 92, 246, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(16, 185, 129, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

body > * { position: relative; z-index: 1; }

/* Industrial: sidebar blur */
:root .doc-sidebar {
    backdrop-filter: blur(20px);
    background: rgba(10, 10, 12, 0.92);
}

/* Industrial: hero title accent */
:root .doc-hero-title {
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

/* Industrial: stat cards with blur + hover lift */
:root .doc-stat,
:root .doc-stat-card {
    backdrop-filter: blur(10px);
}

/* Industrial: gradient progress bar */
:root .doc-progress-bar {
    background: var(--gradient-accent);
}

/* Industrial: gradient fix button */
:root .doc-btn-fix {
    background: var(--gradient-accent);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}

:root .doc-btn-fix:hover {
    box-shadow: 0 6px 24px rgba(59, 130, 246, 0.5);
    transform: translateY(-1px);
}

/* ========================================
 * DEFAULT: Industrial Light
 * ======================================== */
html.light-theme {
    --bg-primary: oklch(95% 0.01 250);
    --bg-secondary: oklch(91% 0.01 250);
    --bg-tertiary: oklch(86% 0.01 250);
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-card-hover: #ffffff;
    --bg-input: oklch(97% 0.01 250);
    --hover-bg: rgba(59, 130, 246, 0.06);
    --text-primary: oklch(18% 0.02 250);
    --text-secondary: oklch(38% 0.02 250);
    --text-muted: oklch(60% 0.01 250);
    --border-color: rgba(0, 0, 0, 0.1);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --card-bg: rgba(255, 255, 255, 0.95);
}

html.light-theme body::before {
    background:
        radial-gradient(ellipse at 15% 50%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 30%, rgba(139, 92, 246, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 85%, rgba(16, 185, 129, 0.03) 0%, transparent 50%);
}

html.light-theme .doc-sidebar {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
}

/* ========================================
 * THEME: Combined (GitHub-like dev)
 * Fonts: JetBrains Mono + DM Sans
 * Accent: green + blue, gradient mesh + noise
 * ======================================== */
html.theme-combined {
    --bg-primary: oklch(10% 0.02 240);
    --bg-secondary: oklch(14% 0.02 240);
    --bg-tertiary: oklch(18% 0.02 240);
    --bg-card: rgba(22, 27, 34, 0.9);
    --bg-card-hover: rgba(33, 38, 45, 0.95);
    --bg-input: oklch(10% 0.02 240);
    --hover-bg: rgba(16, 185, 129, 0.08);
    --text-primary: oklch(92% 0.01 230);
    --text-secondary: oklch(62% 0.01 230);
    --text-muted: oklch(38% 0.01 230);
    --color-primary: oklch(70% 0.18 160);
    --color-secondary: oklch(62% 0.22 255);
    --color-primary-dim: rgba(16, 185, 129, 0.12);
    --border-color: rgba(240, 246, 252, 0.1);
    --gradient-accent: linear-gradient(135deg, oklch(70% 0.18 160), oklch(62% 0.22 255));
    --font-display: 'JetBrains Mono', monospace;
    --font-body: 'DM Sans', sans-serif;
    --radius: 8px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 3px 8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.6);
    --card-bg: rgba(22, 27, 34, 0.9);
}

/* Combined: gradient mesh + noise */
html.theme-combined body::before {
    background:
        radial-gradient(ellipse at 15% 50%, rgba(16, 185, 129, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 30%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 85%, rgba(99, 102, 241, 0.04) 0%, transparent 50%);
}

html.theme-combined body::after {
    content: '';
    position: fixed;
    inset: 0;
    opacity: 0.015;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

html.theme-combined .doc-sidebar {
    backdrop-filter: blur(16px);
    background: rgba(13, 17, 23, 0.92);
}

html.theme-combined .doc-hero-title {
    color: var(--color-primary);
    letter-spacing: -0.02em;
}

html.theme-combined .doc-stat,
html.theme-combined .doc-stat-card {
    backdrop-filter: blur(10px);
}

html.theme-combined .doc-btn-fix {
    background: var(--gradient-accent);
    box-shadow: 3px 3px 0 rgba(16, 185, 129, 0.25);
}

html.theme-combined .doc-btn-fix:hover {
    box-shadow: 4px 4px 0 rgba(16, 185, 129, 0.3);
    transform: translate(-1px, -1px);
}

html.theme-combined .doc-btn-fix:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}

html.theme-combined.light-theme {
    --bg-primary: oklch(97% 0.01 240);
    --bg-secondary: oklch(94% 0.01 240);
    --bg-tertiary: oklch(90% 0.01 240);
    --bg-card: rgba(255, 255, 255, 0.98);
    --bg-card-hover: #ffffff;
    --bg-input: oklch(97% 0.01 240);
    --hover-bg: rgba(16, 185, 129, 0.06);
    --text-primary: oklch(18% 0.02 240);
    --text-secondary: oklch(38% 0.02 240);
    --text-muted: oklch(60% 0.01 240);
    --border-color: rgba(0, 0, 0, 0.08);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 3px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
    --card-bg: rgba(255, 255, 255, 0.98);
}

html.theme-combined.light-theme .doc-sidebar {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
}

/* ========================================
 * THEME: Minimal
 * Fonts: IBM Plex Mono + Helvetica Neue
 * Accent: green only, flat, noise texture
 * ======================================== */
html.theme-minimal {
    --bg-primary: oklch(6% 0 0);
    --bg-secondary: oklch(10% 0 0);
    --bg-tertiary: oklch(14% 0 0);
    --bg-card: oklch(10% 0 0);
    --bg-card-hover: oklch(12% 0 0);
    --bg-input: oklch(6% 0 0);
    --hover-bg: rgba(16, 185, 129, 0.06);
    --text-primary: oklch(88% 0 0);
    --text-secondary: oklch(58% 0 0);
    --text-muted: oklch(38% 0 0);
    --color-primary: oklch(70% 0.18 160);
    --color-secondary: oklch(70% 0.18 160);
    --color-primary-dim: rgba(16, 185, 129, 0.1);
    --border-color: rgba(255, 255, 255, 0.06);
    --gradient-accent: linear-gradient(135deg, oklch(70% 0.18 160), oklch(62% 0.16 160));
    --font-display: 'IBM Plex Mono', monospace;
    --font-body: 'Helvetica Neue', Helvetica, sans-serif;
    --radius: 4px;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --card-bg: oklch(10% 0 0);
}

/* Minimal: noise texture only */
html.theme-minimal body::before {
    content: '';
    position: fixed;
    inset: 0;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

/* Minimal: locked card with subtle gradient */
html.theme-minimal .doc-question-card[data-state="locked"] {
    background: linear-gradient(135deg, var(--bg-card), rgba(16, 185, 129, 0.04));
}

html.theme-minimal.light-theme {
    --bg-primary: oklch(98% 0 0);
    --bg-secondary: oklch(95% 0 0);
    --bg-tertiary: oklch(91% 0 0);
    --bg-card: #ffffff;
    --bg-card-hover: #ffffff;
    --bg-input: oklch(98% 0 0);
    --hover-bg: rgba(16, 185, 129, 0.04);
    --text-primary: oklch(12% 0 0);
    --text-secondary: oklch(38% 0 0);
    --text-muted: oklch(65% 0 0);
    --border-color: rgba(0, 0, 0, 0.08);
    --card-bg: #ffffff;
}

/* ========================================
 * THEME: Brutalist
 * Fonts: Archivo Black + Roboto Mono
 * Accent: yellow, radius 0, hard shadows, grid bg
 * ======================================== */
html.theme-brutalist {
    --bg-primary: oklch(10% 0 0);
    --bg-secondary: oklch(14% 0 0);
    --bg-tertiary: oklch(18% 0 0);
    --bg-card: oklch(14% 0 0);
    --bg-card-hover: oklch(18% 0 0);
    --bg-input: oklch(10% 0 0);
    --hover-bg: rgba(250, 204, 21, 0.08);
    --text-primary: oklch(96% 0 0);
    --text-secondary: oklch(72% 0 0);
    --text-muted: oklch(45% 0 0);
    --color-primary: oklch(85% 0.18 95);
    --color-secondary: oklch(72% 0.16 55);
    --color-primary-dim: rgba(250, 204, 21, 0.12);
    --border-color: rgba(255, 255, 255, 0.15);
    --gradient-accent: linear-gradient(135deg, oklch(85% 0.18 95), oklch(72% 0.16 55));
    --font-display: 'Archivo Black', sans-serif;
    --font-body: 'Roboto Mono', monospace;
    --radius: 0px;
    --shadow-sm: 2px 2px 0 rgba(250, 204, 21, 0.3);
    --shadow-md: 4px 4px 0 rgba(250, 204, 21, 0.25);
    --shadow-lg: 6px 6px 0 rgba(250, 204, 21, 0.2);
    --card-bg: oklch(14% 0 0);
}

/* Brutalist: grid pattern background */
html.theme-brutalist body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
}

/* Brutalist: hard borders + uppercase */
html.theme-brutalist .doc-stat,
html.theme-brutalist .doc-stat-card,
html.theme-brutalist .doc-question-card,
html.theme-brutalist .doc-feedback-item {
    border-width: 2px;
}

html.theme-brutalist .doc-hero-title {
    text-transform: uppercase;
    letter-spacing: -0.03em;
}

html.theme-brutalist .doc-stat-label,
html.theme-brutalist .doc-group-header {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Brutalist: press effect on buttons */
html.theme-brutalist .doc-btn-fix {
    background: var(--color-primary);
    color: oklch(10% 0 0);
    border: 2px solid var(--text-primary);
    box-shadow: var(--shadow-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

html.theme-brutalist .doc-btn-fix:hover {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 rgba(250, 204, 21, 0.3);
}

html.theme-brutalist .doc-btn-fix:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}

/* Brutalist: stat card hover */
html.theme-brutalist .doc-stat:hover,
html.theme-brutalist .doc-stat-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 rgba(250, 204, 21, 0.25);
}

/* Brutalist: locked card */
html.theme-brutalist .doc-question-card[data-state="locked"] {
    border-width: 3px;
    box-shadow: 4px 4px 0 rgba(250, 204, 21, 0.3);
}

html.theme-brutalist.light-theme {
    --bg-primary: oklch(96% 0 0);
    --bg-secondary: oklch(92% 0 0);
    --bg-tertiary: oklch(86% 0 0);
    --bg-card: #ffffff;
    --bg-card-hover: #ffffff;
    --bg-input: oklch(96% 0 0);
    --hover-bg: rgba(250, 204, 21, 0.06);
    --text-primary: oklch(10% 0 0);
    --text-secondary: oklch(30% 0 0);
    --text-muted: oklch(55% 0 0);
    --border-color: rgba(0, 0, 0, 0.2);
    --shadow-sm: 2px 2px 0 rgba(0, 0, 0, 0.15);
    --shadow-md: 4px 4px 0 rgba(0, 0, 0, 0.12);
    --shadow-lg: 6px 6px 0 rgba(0, 0, 0, 0.1);
    --card-bg: #ffffff;
}

html.theme-brutalist.light-theme body::before {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* ========================================
 * THEME: Cosmic
 * Fonts: Space Grotesk + JetBrains Mono
 * Accent: rose-purple, gradient mesh
 * ======================================== */
html.theme-cosmic {
    --bg-primary: #0f0f1a;
    --bg-secondary: #1a1a2e;
    --bg-tertiary: #1f2b4d;
    --bg-card: #16213e;
    --bg-card-hover: #1c2844;
    --bg-input: #0d0d18;
    --hover-bg: #1f2b4d;
    --text-primary: #e4e4e7;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --color-primary: #e94560;
    --color-secondary: #ff6b6b;
    --color-primary-dim: hsla(350, 80%, 55%, 0.15);
    --border-color: rgba(255, 255, 255, 0.1);
    --gradient-accent: linear-gradient(135deg, #e94560, #ff6b6b);
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'JetBrains Mono', monospace;
    --radius: 8px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
    --card-bg: #16213e;
}

/* Cosmic: rose-tinted gradient mesh */
html.theme-cosmic body::before {
    background:
        radial-gradient(ellipse at 25% 40%, rgba(233, 69, 96, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 60%, rgba(255, 107, 107, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 20%, rgba(99, 102, 241, 0.04) 0%, transparent 50%);
}

html.theme-cosmic .doc-sidebar {
    backdrop-filter: blur(20px);
    background: rgba(15, 15, 26, 0.92);
}

html.theme-cosmic .doc-hero-title {
    color: var(--color-primary);
    letter-spacing: -0.01em;
}

html.theme-cosmic .doc-stat,
html.theme-cosmic .doc-stat-card {
    backdrop-filter: blur(10px);
}

html.theme-cosmic .doc-question-card[data-state="locked"] {
    box-shadow: 0 0 20px rgba(233, 69, 96, 0.15);
    animation: cosmic-glow 3s ease infinite;
}

@keyframes cosmic-glow {
    0%, 100% { box-shadow: 0 0 16px rgba(233, 69, 96, 0.1); }
    50% { box-shadow: 0 0 28px rgba(233, 69, 96, 0.25); }
}

html.theme-cosmic.light-theme {
    --bg-primary: #edeaf4;
    --bg-secondary: #e2dff0;
    --bg-tertiary: #d4d0e5;
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-card-hover: #ffffff;
    --bg-input: #edeaf4;
    --hover-bg: hsla(350, 80%, 55%, 0.06);
    --text-primary: #121225;
    --text-secondary: #3d3d55;
    --text-muted: #7a7a95;
    --border-color: rgba(0, 0, 0, 0.08);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --card-bg: rgba(255, 255, 255, 0.95);
}

html.theme-cosmic.light-theme .doc-sidebar {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
}

/* ========================================
 * THEME: Terminal
 * Fonts: Space Grotesk + JetBrains Mono
 * Accent: neon green, scanlines, no mesh
 * ======================================== */
html.theme-terminal {
    --bg-primary: oklch(5% 0.01 240);
    --bg-secondary: oklch(8% 0.01 240);
    --bg-tertiary: oklch(14% 0.01 240);
    --bg-card: rgba(10, 12, 18, 0.95);
    --bg-card-hover: rgba(16, 18, 26, 0.95);
    --bg-input: oklch(4% 0.01 240);
    --hover-bg: rgba(16, 185, 129, 0.08);
    --text-primary: oklch(92% 0.06 160);
    --text-secondary: oklch(76% 0.1 160);
    --text-muted: oklch(35% 0.06 160);
    --color-primary: oklch(70% 0.18 160);
    --color-secondary: oklch(78% 0.16 160);
    --color-primary-dim: rgba(16, 185, 129, 0.12);
    --border-color: rgba(16, 185, 129, 0.15);
    --gradient-accent: linear-gradient(135deg, oklch(70% 0.18 160), oklch(78% 0.16 160));
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'JetBrains Mono', monospace;
    --radius: 2px;
    --shadow-sm: 0 0 4px rgba(16, 185, 129, 0.1);
    --shadow-md: 0 0 8px rgba(16, 185, 129, 0.1);
    --shadow-lg: 0 0 16px rgba(16, 185, 129, 0.15);
    --card-bg: rgba(10, 12, 18, 0.95);
}

/* Terminal: scanline effect on stat cards */
html.theme-terminal .doc-stat,
html.theme-terminal .doc-stat-card {
    position: relative;
    overflow: hidden;
}

html.theme-terminal .doc-stat::after,
html.theme-terminal .doc-stat-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(16, 185, 129, 0.02) 2px,
        rgba(16, 185, 129, 0.02) 4px
    );
    pointer-events: none;
    border-radius: inherit;
}

/* Terminal: green glow on locked cards */
html.theme-terminal .doc-question-card[data-state="locked"] {
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.15);
}

html.theme-terminal .doc-sidebar {
    border-right-color: rgba(16, 185, 129, 0.2);
}

html.theme-terminal.light-theme {
    --bg-primary: oklch(95% 0.01 240);
    --bg-secondary: oklch(92% 0.01 240);
    --bg-tertiary: oklch(86% 0.01 240);
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-card-hover: #ffffff;
    --bg-input: oklch(95% 0.01 240);
    --hover-bg: rgba(16, 185, 129, 0.06);
    --text-primary: oklch(14% 0.02 240);
    --text-secondary: oklch(35% 0.01 240);
    --text-muted: oklch(55% 0.01 240);
    --border-color: rgba(0, 0, 0, 0.1);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 3px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
    --card-bg: rgba(255, 255, 255, 0.95);
}

/* ========================================
 * THEME: Corporate
 * Fonts: Inter + Inter
 * Accent: blue, clean professional
 * ======================================== */
html.theme-corporate {
    --bg-primary: oklch(6% 0.01 240);
    --bg-secondary: oklch(10% 0.01 240);
    --bg-tertiary: oklch(16% 0.01 240);
    --bg-card: rgba(14, 16, 22, 0.95);
    --bg-card-hover: rgba(20, 22, 30, 0.95);
    --bg-input: oklch(5% 0.01 240);
    --hover-bg: rgba(59, 130, 246, 0.06);
    --text-primary: oklch(90% 0.01 240);
    --text-secondary: oklch(65% 0.01 240);
    --text-muted: oklch(42% 0.01 240);
    --color-primary: oklch(62% 0.2 255);
    --color-secondary: oklch(68% 0.18 220);
    --color-primary-dim: rgba(59, 130, 246, 0.1);
    --border-color: rgba(255, 255, 255, 0.06);
    --gradient-accent: linear-gradient(135deg, oklch(62% 0.2 255), oklch(68% 0.18 220));
    --font-display: 'DM Sans', sans-serif;
    --font-body: 'DM Sans', sans-serif;
    --radius: 6px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.5);
    --card-bg: rgba(14, 16, 22, 0.95);
}

html.theme-corporate.light-theme {
    --bg-primary: oklch(95% 0.01 240);
    --bg-secondary: oklch(92% 0.01 240);
    --bg-tertiary: oklch(86% 0.01 240);
    --bg-card: rgba(255, 255, 255, 0.98);
    --bg-card-hover: #ffffff;
    --bg-input: oklch(96% 0.01 240);
    --hover-bg: rgba(59, 130, 246, 0.04);
    --text-primary: oklch(14% 0.02 240);
    --text-secondary: oklch(35% 0.01 240);
    --text-muted: oklch(55% 0.01 240);
    --border-color: rgba(0, 0, 0, 0.08);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.1);
    --card-bg: rgba(255, 255, 255, 0.98);
}

/* ========================================
 * SHARED: Locked card glow animation (all themes)
 * ======================================== */
.doc-question-card[data-state="locked"] {
    animation: doc-locked-glow 3s ease infinite;
}

@keyframes doc-locked-glow {
    0%, 100% { box-shadow: 0 0 16px color-mix(in oklch, var(--color-primary), transparent 85%); }
    50% { box-shadow: 0 0 28px color-mix(in oklch, var(--color-primary), transparent 70%); }
}

/* ========================================
 * Font imports with font-display: swap
 * ======================================== */
@font-face { font-family: 'JetBrains Mono'; font-display: swap; src: local('JetBrains Mono'); }
@font-face { font-family: 'Exo 2'; font-display: swap; src: local('Exo 2'); }
@font-face { font-family: 'Space Grotesk'; font-display: swap; src: local('Space Grotesk'); }
@font-face { font-family: 'IBM Plex Mono'; font-display: swap; src: local('IBM Plex Mono'); }
@font-face { font-family: 'DM Sans'; font-display: swap; src: local('DM Sans'); }
@font-face { font-family: 'Archivo Black'; font-display: swap; src: local('Archivo Black'); }
@font-face { font-family: 'Roboto Mono'; font-display: swap; src: local('Roboto Mono'); }
@font-face { font-family: 'Inter'; font-display: swap; src: local('Inter'); }