/* css/base.css - Variables, Themes, and Resets */

[data-theme="light"] {
  --bg: #f8f9fc; --surface: #FFFFFF;
  --primary: #2C5CC5; --primary-light: #EBF0FA; --primary-mid: #D6E1F5; --primary-hover: #234BA0; --primary-glow: rgba(44,92,197,0.12);
  --secondary: #1B9E77; --secondary-light: #E6F6F1; --secondary-muted: #7BBFAB;
  --tertiary: #6B5CA5; --tertiary-light: #F0EDF7;
  --alert: #D95F02; --alert-light: #FDF0E6;
  --highlight: #E6AB02; --highlight-light: #FDF8E6;
  --text: #111827; --text-muted: #5A6270; --text-light: #8B95A5;
  --border: #E5E7EB; --border-light: #F0F1F3;
  --panel: #E0E7F2; --panel-deep: #D0DAE9; --panel-text: #2A3A52; --panel-accent: #3D6ACE;
  --solved-bg: #D0DAE9; --solved-deep: #C2CFE2; --solved-text: #1E2E44; --solved-val: #2C5CC5;
  --shadow-sm: 0 1px 3px rgba(17,24,39,0.05), 0 1px 2px rgba(17,24,39,0.03);
  --shadow-md: 0 4px 14px rgba(17,24,39,0.07), 0 2px 4px rgba(17,24,39,0.03);
  --shadow-lg: 0 10px 32px rgba(17,24,39,0.09), 0 4px 10px rgba(17,24,39,0.04);
  --shadow-primary: 0 3px 14px rgba(44,92,197,0.22);
  --overlay: rgba(17,24,39,0.22);
}

[data-theme="light"][data-scheme="teal"] {
  --primary: #1B9E77; --primary-light: #E6F6F1; --primary-mid: #C5EAE0; --primary-hover: #147A5C; --primary-glow: rgba(27,158,119,0.12);
}
[data-theme="light"][data-scheme="orange"] {
  --primary: #D95F02; --primary-light: #FDF0E6; --primary-mid: #F5D4B8; --primary-hover: #B34E02; --primary-glow: rgba(217,95,2,0.12);
}
[data-theme="light"][data-scheme="amber"] {
  --primary: #C49200; --primary-light: #FDF8E6; --primary-mid: #F0E0A8; --primary-hover: #9E7600; --primary-glow: rgba(196,146,0,0.12);
}
[data-theme="light"][data-scheme="purple"] {
  --primary: #6B5CA5; --primary-light: #F0EDF7; --primary-mid: #D8D0EB; --primary-hover: #564A88; --primary-glow: rgba(107,92,165,0.12);
}

[data-theme="dark"] {
  --bg: #111827; --surface: #1E2636;
  --primary: #6B93DB; --primary-light: #1E2C42; --primary-mid: #263550; --primary-hover: #8AAEE6; --primary-glow: rgba(107,147,219,0.15);
  --secondary: #3FC9A0; --secondary-light: #162E27; --secondary-muted: #2D8A6E;
  --tertiary: #9B8DD4; --tertiary-light: #252040;
  --alert: #F08C4A; --alert-light: #2E1E10;
  --highlight: #F0C840; --highlight-light: #2E2810;
  --text: #E5E7EB; --text-muted: #9BA4B4; --text-light: #6B7585;
  --border: #2A3346; --border-light: #232D3E;
  --panel: #1A2436; --panel-deep: #162030; --panel-text: #B0BCE0; --panel-accent: #6B93DB;
  --solved-bg: #162030; --solved-deep: #121C2A; --solved-text: #B0BCE0; --solved-val: #8AAEE6;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.3);
  --shadow-lg: 0 10px 32px rgba(0,0,0,0.4);
  --shadow-primary: 0 3px 14px rgba(107,147,219,0.25);
  --overlay: rgba(0,0,0,0.45);
}

[data-theme="dark"][data-scheme="teal"] {
  --primary: #3FC9A0; --primary-light: #162E27; --primary-mid: #1E3D33; --primary-hover: #5DD8B4;
}
[data-theme="dark"][data-scheme="orange"] {
  --primary: #F08C4A; --primary-light: #2E1E10; --primary-mid: #3E2818; --primary-hover: #F5A46E;
}
[data-theme="dark"][data-scheme="amber"] {
  --primary: #F0C840; --primary-light: #2E2810; --primary-mid: #3E3518; --primary-hover: #F5D668;
}
[data-theme="dark"][data-scheme="purple"] {
  --primary: #9B8DD4; --primary-light: #252040; --primary-mid: #302A50; --primary-hover: #B3A6E0;
}

:root {
  --radius: 14px; --radius-lg: 20px; --radius-sm: 8px;
  --font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Source Code Pro", "Menlo", "Consolas", monospace;
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --font-scale: 1;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: calc(18px * var(--font-scale)); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh; transition: background var(--transition), color var(--transition); }
::selection { background: var(--primary-light); color: var(--primary); }

/* The Dark Mode Link Fix */
a { color: var(--primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--primary-hover); text-decoration: underline; }
[data-theme="dark"] a { color: var(--primary-hover); } 
[data-theme="dark"] a:hover { color: #A6C8FF; }

@keyframes fadeInUp { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:translateY(0) } }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes slideDown { from { opacity:0; max-height:0 } to { opacity:1; max-height:3000px } }
@keyframes scaleIn { from { opacity:0; transform:scale(.96) } to { opacity:1; transform:scale(1) } }
@keyframes copyFlash { 0%{opacity:1} 70%{opacity:1} 100%{opacity:0} }

.anim-up { animation: fadeInUp .35s ease-out forwards }
.anim-fade { animation: fadeIn .3s ease-out forwards }
.anim-slide { animation: slideDown .4s ease-out forwards; overflow:hidden }
.anim-scale { animation: scaleIn .3s ease-out forwards }