/* ═══════════════════════════════════════════════════
   DABER Dictionary — Design System (Hallmark)
   Единый источник токенов: тёмная + светлая тема
   ═══════════════════════════════════════════════════ */

/* ── Dark Theme (default) ── */
:root {
  --color-paper:    oklch(12% 0.008 270);
  --color-paper-2:  oklch(14% 0.010 270);
  --color-surface:  oklch(18% 0.012 270);
  --color-surface-2:oklch(22% 0.014 270);
  --color-surface-elev: oklch(24% 0.015 270);
  --color-rule:     oklch(28% 0.015 270);
  --color-neutral:  oklch(50% 0.012 270);
  --color-muted:    oklch(65% 0.008 270);
  --color-ink:      oklch(93% 0.005 270);
  --color-bg:       oklch(12% 0.008 270);
  --color-accent:   oklch(58% 0.22 285);
  --color-accent-2: oklch(72% 0.18 285);
  --color-accent-dim: oklch(58% 0.22 285 / 0.15);
  --color-green:    oklch(62% 0.20 150);
  --color-orange:   oklch(65% 0.18 65);
  --color-red:      oklch(55% 0.20 25);
  --card-shadow:    0 2px 12px rgba(0,0,0,0.4);
  --modal-overlay:  rgba(0,0,0,0.7);
  --orb-opacity-1:  0.06;
  --orb-opacity-2:  0.05;
  --nav-bg:         oklch(12% 0.008 270 / 0.75);
  --input-bg:       var(--color-surface);
  --input-border:   var(--color-rule);

  --font-display: 'Inter', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-hebrew: 'Inter', -apple-system, sans-serif;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 5rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Light Theme ── */
[data-theme="light"] {
  --color-paper:    oklch(98% 0.003 270);
  --color-paper-2:  oklch(95% 0.005 270);
  --color-surface:  oklch(92% 0.008 270);
  --color-surface-2:oklch(88% 0.010 270);
  --color-surface-elev: oklch(96% 0.005 270);
  --color-rule:     oklch(82% 0.012 270);
  --color-neutral:  oklch(50% 0.012 270);
  --color-muted:    oklch(40% 0.010 270);
  --color-ink:      oklch(15% 0.005 270);
  --color-bg:       oklch(98% 0.003 270);
  --color-accent:   oklch(50% 0.22 285);
  --color-accent-2: oklch(45% 0.18 285);
  --color-accent-dim: oklch(50% 0.22 285 / 0.12);
  --color-green:    oklch(45% 0.20 150);
  --color-orange:   oklch(48% 0.18 65);
  --color-red:      oklch(42% 0.20 25);
  --card-shadow:    0 2px 12px rgba(0,0,0,0.1);
  --modal-overlay:  rgba(0,0,0,0.5);
  --orb-opacity-1:  0.12;
  --orb-opacity-2:  0.10;
  --nav-bg:         oklch(99% 0.002 270 / 0.8);
  --input-bg:       oklch(97% 0.003 270);
  --input-border:   oklch(78% 0.010 270);
}

/* ── POS Color Palette (same for both themes) ── */
:root {
  --pos-color-verb: oklch(58% 0.22 285);
  --pos-color-noun: oklch(55% 0.18 250);
  --pos-color-adj: oklch(55% 0.20 150);
  --pos-color-adv: oklch(50% 0.18 320);
  --pos-color-prep: oklch(55% 0.18 65);
  --pos-color-conj: oklch(50% 0.18 10);
  --pos-color-pron: oklch(50% 0.18 280);
  --pos-color-num: oklch(55% 0.15 210);
  --pos-color-intj: oklch(58% 0.16 90);
  --pos-color-particle: oklch(42% 0.04 270);
  --pos-color-pref: oklch(50% 0.15 195);
  --pos-color-det: oklch(42% 0.05 260);
  --pos-color-part: oklch(42% 0.04 270);
}

/* ── Base Reset ── */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-body);
  background: var(--color-paper);
  color: var(--color-ink);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  font-feature-settings: 'cv01', 'ss03';
  -webkit-font-smoothing: antialiased;
}

.page-main { flex: 1; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-rule); border-radius: var(--radius-sm); }
::-webkit-scrollbar-thumb:hover { background: var(--color-neutral); }

/* ── Theme Toggle ── */
.theme-toggle {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  z-index: 200;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-rule);
  background: var(--color-surface-2);
  color: var(--color-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s var(--ease-out), background 0.3s;
  box-shadow: var(--card-shadow);
}
.theme-toggle:hover {
  transform: scale(1.1);
  background: var(--color-surface-elev);
}
.theme-toggle svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}