/* FLASHCARDS 10 — Theme System */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --vm-rojo: #FF2D33;
  --vm-naranja: #FF6225;
  --vm-gradiente: linear-gradient(135deg, #FF2D33, #FF6225);
  --vm-gradiente-hover: linear-gradient(135deg, #E02028, #E0551E);
  --bg: #FFF8F5;
  --bg-secondary: #FFF0EB;
  --card-bg: #FFFFFF;
  --card-bg-glass: rgba(255, 255, 255, 0.75);
  --text: #1a1a2e;
  --text-secondary: #666;
  --border: #f0e0d8;
  --shadow: rgba(255, 45, 51, 0.08);
  --shadow-heavy: rgba(255, 45, 51, 0.15);
  --color-otra: #C0392B;
  --color-dificil: #E0A830;
  --color-bien: #0F9B58;
  --color-facil: #2C74B3;
  --badge-nueva: #2C74B3;
  --badge-aprendiendo: #FF6225;
  --badge-joven: #0F9B58;
  --badge-madura: #0F9B58;
  --badge-sanguijuela: #C0392B;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
}

[data-theme="dark"] {
  --bg: #1A0A0A;
  --bg-secondary: #251212;
  --card-bg: #2A1515;
  --card-bg-glass: rgba(42, 21, 21, 0.8);
  --text: #F0E0DD;
  --text-secondary: #AA9090;
  --border: #3A2525;
  --shadow: rgba(0, 0, 0, 0.3);
  --shadow-heavy: rgba(0, 0, 0, 0.5);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s, color 0.3s;
}

.glass {
  background: var(--card-bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .glass {
  border: 1px solid rgba(255, 255, 255, 0.06);
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--vm-rojo); }
::selection { background: rgba(255, 45, 51, 0.15); color: var(--text); }