/* ============================================
   CSS VARIABLES - MULTI-THEME SYSTEM
   ============================================ */
:root {
    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;

    /* Shared values */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;
}

/* ============================================
   THEME: Dark (Default) - GitHub Dark style
   ============================================ */
[data-theme="dark"], :root {
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #21262d;
    --bg-elevated: #1a1f26;
    --bg-overlay: rgba(0, 0, 0, 0.9);

    --border-default: #30363d;
    --border-muted: #21262d;
    --border-accent: #58a6ff;

    --text-primary: #e6edf3;
    --text-secondary: #c9d1d9;
    --text-muted: #8b949e;
    --text-faint: #6e7681;

    --accent-blue: #58a6ff;
    --accent-blue-bg: rgba(56, 139, 253, 0.15);
    --accent-green: #3fb950;
    --accent-green-bg: rgba(63, 185, 80, 0.15);
    --accent-purple: #a371f7;
    --accent-purple-bg: rgba(163, 113, 247, 0.15);
    --accent-red: #f85149;
    --accent-red-bg: rgba(248, 81, 73, 0.15);
    --accent-yellow: #d29922;
    --accent-orange: #f0883e;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
    --shadow-glow-blue: 0 0 20px rgba(88, 166, 255, 0.15);
    --shadow-glow-green: 0 0 20px rgba(63, 185, 80, 0.15);
    --shadow-glow-purple: 0 0 20px rgba(163, 113, 247, 0.15);

    --user-bubble-bg: #238636;
    --user-bubble-text: #ffffff;
}

/* ============================================
   THEME: Light - Clean professional
   ============================================ */
[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f6f8fa;
    --bg-tertiary: #eaeef2;
    --bg-elevated: #ffffff;
    --bg-overlay: rgba(255, 255, 255, 0.95);

    --border-default: #d0d7de;
    --border-muted: #eaeef2;
    --border-accent: #0969da;

    --text-primary: #1f2328;
    --text-secondary: #424a53;
    --text-muted: #656d76;
    --text-faint: #8c959f;

    --accent-blue: #0969da;
    --accent-blue-bg: rgba(9, 105, 218, 0.1);
    --accent-green: #1a7f37;
    --accent-green-bg: rgba(26, 127, 55, 0.1);
    --accent-purple: #8250df;
    --accent-purple-bg: rgba(130, 80, 223, 0.1);
    --accent-red: #cf222e;
    --accent-red-bg: rgba(207, 34, 46, 0.1);
    --accent-yellow: #9a6700;
    --accent-orange: #bc4c00;

    --shadow-sm: 0 1px 3px rgba(31, 35, 40, 0.08);
    --shadow-md: 0 4px 12px rgba(31, 35, 40, 0.12);
    --shadow-lg: 0 8px 24px rgba(31, 35, 40, 0.16);
    --shadow-xl: 0 16px 48px rgba(31, 35, 40, 0.2);
    --shadow-glow-blue: 0 0 20px rgba(9, 105, 218, 0.1);
    --shadow-glow-green: 0 0 20px rgba(26, 127, 55, 0.1);
    --shadow-glow-purple: 0 0 20px rgba(130, 80, 223, 0.1);

    --user-bubble-bg: #0969da;
    --user-bubble-text: #ffffff;
}

/* ============================================
   THEME: Midnight - Deep blue medical
   ============================================ */
[data-theme="midnight"] {
    --bg-primary: #0a0e1a;
    --bg-secondary: #111827;
    --bg-tertiary: #1e293b;
    --bg-elevated: #151c2c;
    --bg-overlay: rgba(10, 14, 26, 0.95);

    --border-default: #2d3a52;
    --border-muted: #1e293b;
    --border-accent: #60a5fa;

    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-faint: #64748b;

    --accent-blue: #60a5fa;
    --accent-blue-bg: rgba(96, 165, 250, 0.15);
    --accent-green: #4ade80;
    --accent-green-bg: rgba(74, 222, 128, 0.15);
    --accent-purple: #c084fc;
    --accent-purple-bg: rgba(192, 132, 252, 0.15);
    --accent-red: #f87171;
    --accent-red-bg: rgba(248, 113, 113, 0.15);
    --accent-yellow: #fbbf24;
    --accent-orange: #fb923c;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7);
    --shadow-glow-blue: 0 0 24px rgba(96, 165, 250, 0.2);
    --shadow-glow-green: 0 0 24px rgba(74, 222, 128, 0.2);
    --shadow-glow-purple: 0 0 24px rgba(192, 132, 252, 0.2);

    --user-bubble-bg: #3b82f6;
    --user-bubble-text: #ffffff;
}

/* ============================================
   THEME: Forest - Calming green medical
   ============================================ */
[data-theme="forest"] {
    --bg-primary: #0c1410;
    --bg-secondary: #132018;
    --bg-tertiary: #1a2e22;
    --bg-elevated: #162419;
    --bg-overlay: rgba(12, 20, 16, 0.95);

    --border-default: #2d4a3a;
    --border-muted: #1a2e22;
    --border-accent: #4ade80;

    --text-primary: #ecfdf5;
    --text-secondary: #bbf7d0;
    --text-muted: #86efac;
    --text-faint: #4ade80;

    --accent-blue: #22d3ee;
    --accent-blue-bg: rgba(34, 211, 238, 0.15);
    --accent-green: #4ade80;
    --accent-green-bg: rgba(74, 222, 128, 0.15);
    --accent-purple: #a78bfa;
    --accent-purple-bg: rgba(167, 139, 250, 0.15);
    --accent-red: #fb7185;
    --accent-red-bg: rgba(251, 113, 133, 0.15);
    --accent-yellow: #fde047;
    --accent-orange: #fdba74;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7);
    --shadow-glow-blue: 0 0 24px rgba(34, 211, 238, 0.15);
    --shadow-glow-green: 0 0 24px rgba(74, 222, 128, 0.2);
    --shadow-glow-purple: 0 0 24px rgba(167, 139, 250, 0.15);

    --user-bubble-bg: #16a34a;
    --user-bubble-text: #ffffff;
}

/* ============================================
   THEME: Clinical - Sterile medical white
   ============================================ */
[data-theme="clinical"] {
    --bg-primary: #fafbfc;
    --bg-secondary: #f0f4f8;
    --bg-tertiary: #e2e8f0;
    --bg-elevated: #ffffff;
    --bg-overlay: rgba(250, 251, 252, 0.98);

    --border-default: #cbd5e1;
    --border-muted: #e2e8f0;
    --border-accent: #0ea5e9;

    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;
    --text-faint: #94a3b8;

    --accent-blue: #0ea5e9;
    --accent-blue-bg: rgba(14, 165, 233, 0.1);
    --accent-green: #10b981;
    --accent-green-bg: rgba(16, 185, 129, 0.1);
    --accent-purple: #8b5cf6;
    --accent-purple-bg: rgba(139, 92, 246, 0.1);
    --accent-red: #ef4444;
    --accent-red-bg: rgba(239, 68, 68, 0.1);
    --accent-yellow: #f59e0b;
    --accent-orange: #f97316;

    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.1);
    --shadow-xl: 0 16px 48px rgba(15, 23, 42, 0.12);
    --shadow-glow-blue: 0 0 20px rgba(14, 165, 233, 0.1);
    --shadow-glow-green: 0 0 20px rgba(16, 185, 129, 0.1);
    --shadow-glow-purple: 0 0 20px rgba(139, 92, 246, 0.1);

    --user-bubble-bg: #0ea5e9;
    --user-bubble-text: #ffffff;
}

/* ============================================
   THEME: Warm - Soft warm tones
   ============================================ */
[data-theme="warm"] {
    --bg-primary: #1c1917;
    --bg-secondary: #292524;
    --bg-tertiary: #3f3a36;
    --bg-elevated: #231f1c;
    --bg-overlay: rgba(28, 25, 23, 0.95);

    --border-default: #57534e;
    --border-muted: #3f3a36;
    --border-accent: #f97316;

    --text-primary: #fafaf9;
    --text-secondary: #e7e5e4;
    --text-muted: #a8a29e;
    --text-faint: #78716c;

    --accent-blue: #38bdf8;
    --accent-blue-bg: rgba(56, 189, 248, 0.15);
    --accent-green: #84cc16;
    --accent-green-bg: rgba(132, 204, 22, 0.15);
    --accent-purple: #e879f9;
    --accent-purple-bg: rgba(232, 121, 249, 0.15);
    --accent-red: #ef4444;
    --accent-red-bg: rgba(239, 68, 68, 0.15);
    --accent-yellow: #facc15;
    --accent-orange: #f97316;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7);
    --shadow-glow-blue: 0 0 24px rgba(56, 189, 248, 0.15);
    --shadow-glow-green: 0 0 24px rgba(132, 204, 22, 0.15);
    --shadow-glow-purple: 0 0 24px rgba(232, 121, 249, 0.15);

    --user-bubble-bg: #ea580c;
    --user-bubble-text: #ffffff;
}

/* ============================================
   THEME: Nord - Nordic cool colors
   ============================================ */
[data-theme="nord"] {
    --bg-primary: #2e3440;
    --bg-secondary: #3b4252;
    --bg-tertiary: #434c5e;
    --bg-elevated: #353c4a;
    --bg-overlay: rgba(46, 52, 64, 0.95);

    --border-default: #4c566a;
    --border-muted: #434c5e;
    --border-accent: #88c0d0;

    --text-primary: #eceff4;
    --text-secondary: #e5e9f0;
    --text-muted: #d8dee9;
    --text-faint: #a3afbf;

    --accent-blue: #88c0d0;
    --accent-blue-bg: rgba(136, 192, 208, 0.15);
    --accent-green: #a3be8c;
    --accent-green-bg: rgba(163, 190, 140, 0.15);
    --accent-purple: #b48ead;
    --accent-purple-bg: rgba(180, 142, 173, 0.15);
    --accent-red: #bf616a;
    --accent-red-bg: rgba(191, 97, 106, 0.15);
    --accent-yellow: #ebcb8b;
    --accent-orange: #d08770;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
    --shadow-glow-blue: 0 0 20px rgba(136, 192, 208, 0.2);
    --shadow-glow-green: 0 0 20px rgba(163, 190, 140, 0.2);
    --shadow-glow-purple: 0 0 20px rgba(180, 142, 173, 0.2);

    --user-bubble-bg: #5e81ac;
    --user-bubble-text: #eceff4;
}