/* ==========================================================================
   GRAMMAR SPECTRUM - THEME ENGINE (16 Themes: 8 Day + 8 Night)
   ========================================================================== */

:root {
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 9999px;
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --font-sans: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
}

/* -------------------------------------------------------------
   ☀️ DAY THEMES (8 THEMES)
   ------------------------------------------------------------- */

/* 1. Spectrum Daylight (Default Day) */
[data-theme="day-spectrum"] {
  --bg-body: #f8fafc;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f1f5f9;
  --bg-input: #f8fafc;
  --border: #e2e8f0;
  --border-focus: #6366f1;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --text-dim: #94a3b8;
  --primary: #4f46e5;
  --primary-hover: #4338ca;
  --primary-light: #eef2ff;
  --primary-glow: rgba(79, 70, 229, 0.15);
  --accent: #06b6d4;
  --accent-light: #ecfeff;
  --success: #10b981;
  --success-light: #ecfdf5;
  --danger: #ef4444;
  --danger-light: #fef2f2;
  --warning: #f59e0b;
  --warning-light: #fffbeb;
  --info: #3b82f6;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.1);
  --shadow-card: 0 4px 20px -2px rgba(99, 102, 241, 0.08);
}

/* 2. Oxford Academic */
[data-theme="day-oxford"] {
  --bg-body: #f7f9fc;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f0f4f8;
  --bg-input: #f4f6fa;
  --border: #dbe3ed;
  --border-focus: #0f3d68;
  --text-main: #0a1f33;
  --text-muted: #486581;
  --text-dim: #829ab1;
  --primary: #0b4f8a;
  --primary-hover: #073863;
  --primary-light: #e6f0fa;
  --primary-glow: rgba(11, 79, 138, 0.18);
  --accent: #b45309;
  --accent-light: #fef3c7;
  --success: #0d9488;
  --success-light: #f0fdfa;
  --danger: #dc2626;
  --danger-light: #fef2f2;
  --warning: #d97706;
  --warning-light: #fffbeb;
  --info: #0284c7;
  --shadow-sm: 0 2px 4px rgba(10,31,51,0.05);
  --shadow-md: 0 6px 18px rgba(10,31,51,0.08);
  --shadow-lg: 0 14px 34px rgba(10,31,51,0.12);
  --shadow-card: 0 4px 22px rgba(11, 79, 138, 0.08);
}

/* 3. Cambridge Emerald */
[data-theme="day-cambridge"] {
  --bg-body: #f4f9f6;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #eaf3ed;
  --bg-input: #f0f7f3;
  --border: #cfe0d5;
  --border-focus: #059669;
  --text-main: #063c26;
  --text-muted: #3d6a52;
  --text-dim: #7da590;
  --primary: #059669;
  --primary-hover: #047857;
  --primary-light: #d1fae5;
  --primary-glow: rgba(5, 150, 105, 0.18);
  --accent: #0284c7;
  --accent-light: #e0f2fe;
  --success: #10b981;
  --success-light: #ecfdf5;
  --danger: #e11d48;
  --danger-light: #ffe4e6;
  --warning: #eab308;
  --warning-light: #fef9c3;
  --info: #06b6d4;
  --shadow-sm: 0 2px 4px rgba(6,60,38,0.05);
  --shadow-md: 0 6px 18px rgba(6,60,38,0.08);
  --shadow-lg: 0 14px 32px rgba(6,60,38,0.11);
  --shadow-card: 0 4px 20px rgba(5, 150, 105, 0.08);
}

/* 4. Nordic Frost */
[data-theme="day-nordic"] {
  --bg-body: #f0f7ff;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #e3effd;
  --bg-input: #f1f8fe;
  --border: #cbe0f6;
  --border-focus: #0284c7;
  --text-main: #0c2340;
  --text-muted: #406080;
  --text-dim: #7da0c4;
  --primary: #0284c7;
  --primary-hover: #0369a1;
  --primary-light: #e0f2fe;
  --primary-glow: rgba(2, 132, 199, 0.16);
  --accent: #6366f1;
  --accent-light: #eef2ff;
  --success: #059669;
  --success-light: #ecfdf5;
  --danger: #ef4444;
  --danger-light: #fef2f2;
  --warning: #f59e0b;
  --warning-light: #fffbeb;
  --info: #38bdf8;
  --shadow-sm: 0 2px 4px rgba(12,35,64,0.04);
  --shadow-md: 0 6px 16px rgba(12,35,64,0.07);
  --shadow-lg: 0 14px 30px rgba(12,35,64,0.1);
  --shadow-card: 0 4px 20px rgba(2, 132, 199, 0.07);
}

/* 5. Solar Warmth */
[data-theme="day-solar"] {
  --bg-body: #fffbf5;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #fef3e2;
  --bg-input: #fdf6ec;
  --border: #f2dec4;
  --border-focus: #d97706;
  --text-main: #451a03;
  --text-muted: #78350f;
  --text-dim: #b45309;
  --primary: #d97706;
  --primary-hover: #b45309;
  --primary-light: #fef3c7;
  --primary-glow: rgba(217, 119, 6, 0.18);
  --accent: #ea580c;
  --accent-light: #ffedd5;
  --success: #15803d;
  --success-light: #f0fdf4;
  --danger: #b91c1c;
  --danger-light: #fef2f2;
  --warning: #f59e0b;
  --warning-light: #fffbeb;
  --info: #0284c7;
  --shadow-sm: 0 2px 4px rgba(69,26,3,0.04);
  --shadow-md: 0 6px 16px rgba(69,26,3,0.07);
  --shadow-lg: 0 14px 30px rgba(69,26,3,0.1);
  --shadow-card: 0 4px 20px rgba(217, 119, 6, 0.08);
}

/* 6. Pastel Blossom */
[data-theme="day-bloom"] {
  --bg-body: #fdf8fb;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #fcebf4;
  --bg-input: #fbf2f8;
  --border: #f2d5e7;
  --border-focus: #db2777;
  --text-main: #4a044e;
  --text-muted: #86198f;
  --text-dim: #c026d3;
  --primary: #db2777;
  --primary-hover: #be185d;
  --primary-light: #fce7f3;
  --primary-glow: rgba(219, 39, 119, 0.18);
  --accent: #8b5cf6;
  --accent-light: #f5f3ff;
  --success: #10b981;
  --success-light: #ecfdf5;
  --danger: #e11d48;
  --danger-light: #ffe4e6;
  --warning: #f59e0b;
  --warning-light: #fffbeb;
  --info: #0ea5e9;
  --shadow-sm: 0 2px 4px rgba(74,4,78,0.04);
  --shadow-md: 0 6px 16px rgba(74,4,78,0.07);
  --shadow-lg: 0 14px 30px rgba(74,4,78,0.1);
  --shadow-card: 0 4px 20px rgba(219, 39, 119, 0.08);
}

/* 7. Sunset Coral */
[data-theme="day-coral"] {
  --bg-body: #fff8f5;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #feebe3;
  --bg-input: #fef1ec;
  --border: #fed2c0;
  --border-focus: #ea580c;
  --text-main: #331508;
  --text-muted: #833919;
  --text-dim: #c2592d;
  --primary: #ea580c;
  --primary-hover: #c2410c;
  --primary-light: #ffedd5;
  --primary-glow: rgba(234, 88, 12, 0.18);
  --accent: #f43f5e;
  --accent-light: #ffe4e6;
  --success: #16a34a;
  --success-light: #f0fdf4;
  --danger: #dc2626;
  --danger-light: #fef2f2;
  --warning: #f59e0b;
  --warning-light: #fffbeb;
  --info: #2563eb;
  --shadow-sm: 0 2px 4px rgba(51,21,8,0.05);
  --shadow-md: 0 6px 16px rgba(51,21,8,0.08);
  --shadow-lg: 0 14px 30px rgba(51,21,8,0.11);
  --shadow-card: 0 4px 20px rgba(234, 88, 12, 0.08);
}

/* 8. Minimal Sand */
[data-theme="day-sand"] {
  --bg-body: #faf7f2;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f1ede4;
  --bg-input: #f6f2ea;
  --border: #e6dfd3;
  --border-focus: #78350f;
  --text-main: #29180f;
  --text-muted: #6b5344;
  --text-dim: #997e6e;
  --primary: #78350f;
  --primary-hover: #5c2607;
  --primary-light: #f5ebd9;
  --primary-glow: rgba(120, 53, 15, 0.15);
  --accent: #0f766e;
  --accent-light: #ccfbf1;
  --success: #15803d;
  --success-light: #f0fdf4;
  --danger: #b91c1c;
  --danger-light: #fef2f2;
  --warning: #d97706;
  --warning-light: #fffbeb;
  --info: #0369a1;
  --shadow-sm: 0 2px 4px rgba(41,24,15,0.04);
  --shadow-md: 0 6px 16px rgba(41,24,15,0.07);
  --shadow-lg: 0 14px 30px rgba(41,24,15,0.1);
  --shadow-card: 0 4px 20px rgba(120, 53, 15, 0.06);
}

/* -------------------------------------------------------------
   🌙 NIGHT / DARK THEMES (8 THEMES)
   ------------------------------------------------------------- */

/* 9. Deep Midnight (Default Night) */
[data-theme="night-midnight"] {
  --bg-body: #0b1120;
  --bg-surface: #0f172a;
  --bg-card: #1e293b;
  --bg-card-hover: #273549;
  --bg-input: #131d31;
  --border: #334155;
  --border-focus: #38bdf8;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
  --primary: #38bdf8;
  --primary-hover: #0284c7;
  --primary-light: rgba(56, 189, 248, 0.12);
  --primary-glow: rgba(56, 189, 248, 0.25);
  --accent: #818cf8;
  --accent-light: rgba(129, 140, 248, 0.12);
  --success: #34d399;
  --success-light: rgba(52, 211, 153, 0.12);
  --danger: #f87171;
  --danger-light: rgba(248, 113, 113, 0.12);
  --warning: #fbbf24;
  --warning-light: rgba(251, 191, 36, 0.12);
  --info: #60a5fa;
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.4);
  --shadow-lg: 0 14px 36px rgba(0,0,0,0.5);
  --shadow-card: 0 4px 22px rgba(56, 189, 248, 0.09);
}

/* 10. Cyber Neon */
[data-theme="night-cyber"] {
  --bg-body: #080c14;
  --bg-surface: #0d131f;
  --bg-card: #151e2e;
  --bg-card-hover: #1e2a40;
  --bg-input: #101726;
  --border: #23344d;
  --border-focus: #22d3ee;
  --text-main: #f0fdf4;
  --text-muted: #a5f3fc;
  --text-dim: #475569;
  --primary: #22d3ee;
  --primary-hover: #06b6d4;
  --primary-light: rgba(34, 211, 238, 0.15);
  --primary-glow: rgba(34, 211, 238, 0.35);
  --accent: #c084fc;
  --accent-light: rgba(192, 132, 252, 0.15);
  --success: #4ade80;
  --success-light: rgba(74, 222, 128, 0.15);
  --danger: #fb7185;
  --danger-light: rgba(251, 113, 133, 0.15);
  --warning: #facc15;
  --warning-light: rgba(250, 204, 21, 0.15);
  --info: #38bdf8;
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.55);
  --shadow-lg: 0 16px 40px rgba(34, 211, 238, 0.12);
  --shadow-card: 0 4px 24px rgba(34, 211, 238, 0.12);
}

/* 11. Obsidian Slate */
[data-theme="night-obsidian"] {
  --bg-body: #111418;
  --bg-surface: #171b21;
  --bg-card: #222730;
  --bg-card-hover: #2b313d;
  --bg-input: #1c2129;
  --border: #363e4c;
  --border-focus: #94a3b8;
  --text-main: #f1f5f9;
  --text-muted: #cbd5e1;
  --text-dim: #64748b;
  --primary: #94a3b8;
  --primary-hover: #cbd5e1;
  --primary-light: rgba(148, 163, 184, 0.12);
  --primary-glow: rgba(148, 163, 184, 0.2);
  --accent: #60a5fa;
  --accent-light: rgba(96, 165, 250, 0.12);
  --success: #34d399;
  --success-light: rgba(52, 211, 153, 0.12);
  --danger: #f87171;
  --danger-light: rgba(248, 113, 113, 0.12);
  --warning: #fbbf24;
  --warning-light: rgba(251, 191, 36, 0.12);
  --info: #818cf8;
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.4);
  --shadow-lg: 0 14px 32px rgba(0,0,0,0.5);
  --shadow-card: 0 4px 20px rgba(0,0,0,0.3);
}

/* 12. Forest Dusk */
[data-theme="night-forest"] {
  --bg-body: #071712;
  --bg-surface: #0d231c;
  --bg-card: #153229;
  --bg-card-hover: #1d4337;
  --bg-input: #102921;
  --border: #234d3f;
  --border-focus: #34d399;
  --text-main: #ecfdf5;
  --text-muted: #a7f3d0;
  --text-dim: #4b7a66;
  --primary: #34d399;
  --primary-hover: #10b981;
  --primary-light: rgba(52, 211, 153, 0.14);
  --primary-glow: rgba(52, 211, 153, 0.25);
  --accent: #2dd4bf;
  --accent-light: rgba(45, 212, 191, 0.14);
  --success: #4ade80;
  --success-light: rgba(74, 222, 128, 0.14);
  --danger: #f87171;
  --danger-light: rgba(248, 113, 113, 0.14);
  --warning: #facc15;
  --warning-light: rgba(250, 204, 21, 0.14);
  --info: #38bdf8;
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.35);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.45);
  --shadow-lg: 0 14px 34px rgba(0,0,0,0.55);
  --shadow-card: 0 4px 22px rgba(52, 211, 153, 0.08);
}

/* 13. Dracula Velvet */
[data-theme="night-dracula"] {
  --bg-body: #191622;
  --bg-surface: #211c2e;
  --bg-card: #2a243a;
  --bg-card-hover: #362f4b;
  --bg-input: #231e31;
  --border: #443c5d;
  --border-focus: #c084fc;
  --text-main: #f5f3ff;
  --text-muted: #d8b4fe;
  --text-dim: #7e699b;
  --primary: #c084fc;
  --primary-hover: #a855f7;
  --primary-light: rgba(192, 132, 252, 0.14);
  --primary-glow: rgba(192, 132, 252, 0.25);
  --accent: #f472b6;
  --accent-light: rgba(244, 114, 182, 0.14);
  --success: #4ade80;
  --success-light: rgba(74, 222, 128, 0.14);
  --danger: #fb7185;
  --danger-light: rgba(251, 113, 133, 0.14);
  --warning: #facc15;
  --warning-light: rgba(250, 204, 21, 0.14);
  --info: #818cf8;
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.35);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.45);
  --shadow-lg: 0 14px 34px rgba(0,0,0,0.55);
  --shadow-card: 0 4px 22px rgba(192, 132, 252, 0.09);
}

/* 14. Tokyo Night */
[data-theme="night-tokyo"] {
  --bg-body: #13141f;
  --bg-surface: #1a1b2a;
  --bg-card: #24263a;
  --bg-card-hover: #30334e;
  --bg-input: #1e2032;
  --border: #3b3f60;
  --border-focus: #f43f5e;
  --text-main: #f1f5f9;
  --text-muted: #fda4af;
  --text-dim: #6d739b;
  --primary: #f43f5e;
  --primary-hover: #e11d48;
  --primary-light: rgba(244, 63, 94, 0.14);
  --primary-glow: rgba(244, 63, 94, 0.28);
  --accent: #8b5cf6;
  --accent-light: rgba(139, 92, 246, 0.14);
  --success: #34d399;
  --success-light: rgba(52, 211, 153, 0.14);
  --danger: #ff4d6d;
  --danger-light: rgba(255, 77, 109, 0.14);
  --warning: #fbbf24;
  --warning-light: rgba(251, 191, 36, 0.14);
  --info: #38bdf8;
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.35);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.45);
  --shadow-lg: 0 14px 34px rgba(0,0,0,0.55);
  --shadow-card: 0 4px 22px rgba(244, 63, 94, 0.1);
}

/* 15. Espresso Roast */
[data-theme="night-coffee"] {
  --bg-body: #17120e;
  --bg-surface: #221b15;
  --bg-card: #2e241c;
  --bg-card-hover: #3c3026;
  --bg-input: #261e17;
  --border: #4d3d30;
  --border-focus: #fbbf24;
  --text-main: #fef3c7;
  --text-muted: #fde68a;
  --text-dim: #8c735d;
  --primary: #f59e0b;
  --primary-hover: #d97706;
  --primary-light: rgba(245, 158, 11, 0.14);
  --primary-glow: rgba(245, 158, 11, 0.25);
  --accent: #fb923c;
  --accent-light: rgba(251, 146, 60, 0.14);
  --success: #4ade80;
  --success-light: rgba(74, 222, 128, 0.14);
  --danger: #f87171;
  --danger-light: rgba(248, 113, 113, 0.14);
  --warning: #fbbf24;
  --warning-light: rgba(251, 191, 36, 0.14);
  --info: #38bdf8;
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.35);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.45);
  --shadow-lg: 0 14px 34px rgba(0,0,0,0.55);
  --shadow-card: 0 4px 22px rgba(245, 158, 11, 0.08);
}

/* 16. AMOLED Pitch Black */
[data-theme="night-amoled"] {
  --bg-body: #000000;
  --bg-surface: #0a0a0a;
  --bg-card: #121212;
  --bg-card-hover: #1c1c1c;
  --bg-input: #0e0e0e;
  --border: #262626;
  --border-focus: #60a5fa;
  --text-main: #ffffff;
  --text-muted: #a3a3a3;
  --text-dim: #525252;
  --primary: #60a5fa;
  --primary-hover: #3b82f6;
  --primary-light: rgba(96, 165, 250, 0.12);
  --primary-glow: rgba(96, 165, 250, 0.28);
  --accent: #a78bfa;
  --accent-light: rgba(167, 139, 250, 0.12);
  --success: #34d399;
  --success-light: rgba(52, 211, 153, 0.12);
  --danger: #f87171;
  --danger-light: rgba(248, 113, 113, 0.12);
  --warning: #fbbf24;
  --warning-light: rgba(251, 191, 36, 0.12);
  --info: #38bdf8;
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.8);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.9);
  --shadow-lg: 0 14px 36px rgba(0,0,0,0.95);
  --shadow-card: 0 0 0 1px #262626;
}