@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap");

:root {
    /* Modern Premium Dark Teal Theme (Default System Theme / Teal Aurora Dunkel) */
    --bg-start: #021412; /* Deep dark teal slate */
    --bg-end: #071513;   /* Rich dark mint slate */
    --bg-orb: rgba(20, 184, 166, 0.15); /* Floating turquoise orbs */
    --panel-bg: rgba(4, 38, 34, 0.15); /* Translucent teal panel */
    --panel-strong: rgba(3, 27, 24, 0.85); /* Deep charcoal teal base */
    --panel-border: rgba(20, 184, 166, 0.08);
    --text-main: #f0fdfa; /* Mint-white main text */
    --text-soft: #99f6e4;
    --text-faint: #2dd4bf;
    
    /* Input Specific Variables */
    --input-bg: rgba(2, 20, 18, 0.5);
    --input-border: rgba(20, 184, 166, 0.15);
    --input-text: #f0fdfa;
    --input-placeholder: #14b8a6;
    --input-focus-border: #2dd4bf;
    --input-focus-ring: rgba(20, 184, 166, 0.25);
    --input-option-bg: #031715;
    --input-option-text: #f0fdfa;
    
    --success-bg: rgba(34, 197, 94, 0.1);
    --success-border: rgba(34, 197, 94, 0.2);
    --error-bg: rgba(239, 68, 68, 0.1);
    --error-border: rgba(239, 68, 68, 0.2);
    --warning-bg: rgba(245, 158, 11, 0.08);
    --warning-border: rgba(245, 158, 11, 0.18);
    
    --button-bg: rgba(20, 184, 166, 0.05);
    --button-border: rgba(20, 184, 166, 0.1);
    --button-hover-bg: rgba(20, 184, 166, 0.12);
    
    /* Primary Button Variables */
    --primary-btn-bg: #14b8a6;
    --primary-btn-text: #021412;
    --primary-btn-hover-bg: #2dd4bf;
    
    --shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.65);
    color-scheme: dark;
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html[data-theme="teal_dark"] {
    /* Explicit dark premium teal configuration */
    --bg-start: #021412;
    --bg-end: #071513;
    --bg-orb: rgba(20, 184, 166, 0.15);
    --panel-bg: rgba(4, 38, 34, 0.15);
    --panel-strong: rgba(3, 27, 24, 0.85);
    --panel-border: rgba(20, 184, 166, 0.08);
    --text-main: #f0fdfa;
    --text-soft: #99f6e4;
    --text-faint: #2dd4bf;
    
    --input-bg: rgba(2, 20, 18, 0.5);
    --input-border: rgba(20, 184, 166, 0.15);
    --input-text: #f0fdfa;
    --input-placeholder: #14b8a6;
    --input-focus-border: #2dd4bf;
    --input-focus-ring: rgba(20, 184, 166, 0.25);
    --input-option-bg: #031715;
    --input-option-text: #f0fdfa;
    
    --button-bg: rgba(20, 184, 166, 0.05);
    --button-border: rgba(20, 184, 166, 0.1);
    --button-hover-bg: rgba(20, 184, 166, 0.12);
    
    --primary-btn-bg: #14b8a6;
    --primary-btn-text: #021412;
    --primary-btn-hover-bg: #2dd4bf;
    
    --shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.65);
    color-scheme: dark;
}

html[data-theme="teal_light"] {
    /* Gorgeous Light Turquoise-Mint Gradient Theme */
    --bg-start: #ccfbf1; /* Light turquoise start */
    --bg-end: #f0fdfa;   /* Clean light teal-cyan end */
    --bg-orb: rgba(20, 184, 166, 0.16); /* Vibrant floating turquoise orbs */
    --panel-bg: rgba(255, 255, 255, 0.75);
    --panel-strong: #ffffff;
    --panel-border: rgba(15, 23, 42, 0.08);
    --text-main: #0f172a;
    --text-soft: #475569;
    --text-faint: #94a3b8;
    
    --input-bg: rgba(15, 23, 42, 0.03);
    --input-border: rgba(15, 23, 42, 0.08);
    --input-text: #0f172a;
    --input-placeholder: #94a3b8;
    --input-focus-border: #0d9488;
    --input-focus-ring: rgba(13, 148, 136, 0.15);
    --input-option-bg: #ffffff;
    --input-option-text: #0f172a;
    
    --button-bg: rgba(15, 23, 42, 0.04);
    --button-border: rgba(15, 23, 42, 0.08);
    --button-hover-bg: rgba(15, 23, 42, 0.08);
    
    --primary-btn-bg: #0d9488;
    --primary-btn-text: #ffffff;
    --primary-btn-hover-bg: #0f766e;
    
    --shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.05);
    color-scheme: light;
}

html[data-theme="graphite"] {
    --bg-start: #0f1013;
    --bg-end: #17181c;
    --bg-orb: rgba(226, 232, 240, 0.05);
    --panel-bg: rgba(26, 29, 36, 0.45);
    --panel-strong: rgba(20, 22, 28, 0.85);
    --panel-border: rgba(255, 255, 255, 0.06);
    --text-main: #f3f4f6;
    --text-soft: #9ca3af;
    --text-faint: #6b7280;
    
    /* Input Specific Variables */
    --input-bg: rgba(0, 0, 0, 0.25);
    --input-border: rgba(255, 255, 255, 0.07);
    --input-text: #f3f4f6;
    --input-placeholder: #6b7280;
    --input-focus-border: #9ca3af;
    --input-focus-ring: rgba(255, 255, 255, 0.1);
    --input-option-bg: #1a1d24;
    --input-option-text: #f3f4f6;
    
    --button-bg: rgba(255, 255, 255, 0.03);
    --button-border: rgba(255, 255, 255, 0.06);
    --button-hover-bg: rgba(255, 255, 255, 0.08);
    
    /* Primary Button Variables */
    --primary-btn-bg: #f3f4f6;
    --primary-btn-text: #111827;
    --primary-btn-hover-bg: #e5e7eb;
    
    --shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.55);
    color-scheme: dark;
}

html[data-theme="midnight"] {
    --bg-start: #030712;
    --bg-end: #0f172a;
    --bg-orb: rgba(59, 130, 246, 0.07);
    --panel-bg: rgba(30, 41, 59, 0.4);
    --panel-strong: rgba(15, 23, 42, 0.85);
    --panel-border: rgba(255, 255, 255, 0.06);
    --text-main: #f8fafc;
    --text-soft: #94a3b8;
    --text-faint: #64748b;
    
    /* Input Specific Variables */
    --input-bg: rgba(0, 0, 0, 0.3);
    --input-border: rgba(255, 255, 255, 0.07);
    --input-text: #f8fafc;
    --input-placeholder: #64748b;
    --input-focus-border: #60a5fa;
    --input-focus-ring: rgba(59, 130, 246, 0.2);
    --input-option-bg: #0f172a;
    --input-option-text: #f8fafc;
    
    --button-bg: rgba(255, 255, 255, 0.02);
    --button-border: rgba(255, 255, 255, 0.05);
    --button-hover-bg: rgba(255, 255, 255, 0.06);
    
    /* Primary Button Variables */
    --primary-btn-bg: #3b82f6;
    --primary-btn-text: #ffffff;
    --primary-btn-hover-bg: #2563eb;
    
    --shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
}

/* aurora theme placeholder (merged into default teal_dark / teal_light) */

html[data-theme="sage"] {
    --bg-start: #0a0f0d;
    --bg-end: #141c19;
    --bg-orb: rgba(34, 197, 94, 0.05);
    --panel-bg: rgba(20, 83, 45, 0.12);
    --panel-strong: rgba(21, 128, 61, 0.12);
    --panel-border: rgba(34, 197, 94, 0.1);
    --text-main: #f0fdf4;
    --text-soft: #bbf7d0;
    --text-faint: #4ade80;
    
    /* Input Specific Variables */
    --input-bg: rgba(10, 15, 13, 0.6);
    --input-border: rgba(34, 197, 94, 0.12);
    --input-text: #f0fdf4;
    --input-placeholder: #22c55e;
    --input-focus-border: #4ade80;
    --input-focus-ring: rgba(34, 197, 94, 0.2);
    --input-option-bg: #0a0f0d;
    --input-option-text: #f0fdf4;
    
    --button-bg: rgba(34, 197, 94, 0.05);
    --button-border: rgba(34, 197, 94, 0.08);
    --button-hover-bg: rgba(34, 197, 94, 0.1);
    
    /* Primary Button Variables */
    --primary-btn-bg: #22c55e;
    --primary-btn-text: #0a0f0d;
    --primary-btn-hover-bg: #16a34a;
    
    --shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
}

html[data-theme="sand"] {
    --bg-start: #0f0d0a;
    --bg-end: #1c1712;
    --bg-orb: rgba(234, 179, 8, 0.05);
    --panel-bg: rgba(113, 63, 18, 0.1);
    --panel-strong: rgba(133, 77, 14, 0.12);
    --panel-border: rgba(234, 179, 8, 0.1);
    --text-main: #fefce8;
    --text-soft: #fef08a;
    --text-faint: #facc15;
    
    /* Input Specific Variables */
    --input-bg: rgba(15, 13, 10, 0.6);
    --input-border: rgba(234, 179, 8, 0.12);
    --input-text: #fefce8;
    --input-placeholder: #eab308;
    --input-focus-border: #facc15;
    --input-focus-ring: rgba(234, 179, 8, 0.2);
    --input-option-bg: #0f0d0a;
    --input-option-text: #fefce8;
    
    --button-bg: rgba(234, 179, 8, 0.05);
    --button-border: rgba(234, 179, 8, 0.08);
    --button-hover-bg: rgba(234, 179, 8, 0.1);
    
    /* Primary Button Variables */
    --primary-btn-bg: #eab308;
    --primary-btn-text: #0f0d0a;
    --primary-btn-hover-bg: #ca8a04;
    
    --shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
}