/* VocabKit design tokens — Green + Pink, kid-friendly, eye-comfort. */

:root {
  /* ── Neutrals (warm-tinted) ────────────────────── */
  --warm-50:  #fdfbf7;
  --warm-100: #f7f3eb;
  --warm-200: #ebe5d8;
  --warm-300: #d4cdbe;
  --warm-500: #807866;
  --warm-700: #4a4538;
  --warm-900: #1f1d18;

  /* ── Brand: Sage Green ─────────────────────────── */
  --green-50:  #eef6e8;
  --green-100: #d5e9c4;
  --green-300: #a8cf8a;
  --green-500: #7fb069;
  --green-700: #5e8a4a;
  --green-900: #3d5e2e;

  /* ── Accent: Soft Pink ─────────────────────────── */
  --pink-50:  #fdf0f3;
  --pink-100: #fbdce3;
  --pink-300: #f4a6b8;
  --pink-500: #e8748d;
  --pink-700: #c14a66;

  /* ── Chapter color presets ─────────────────────── */
  --ch-1: #7fb069;
  --ch-2: #f4a6b8;
  --ch-3: #f7c873;
  --ch-4: #6cb4d4;
  --ch-5: #c39bd3;
  --ch-6: #e89b6c;
  --ch-7: #88c9b2;
  --ch-8: #d4a373;

  /* ── Semantic ──────────────────────────────────── */
  --bg:         var(--warm-50);
  --surface:    #ffffff;
  --surface-2:  var(--warm-100);
  --border:     var(--warm-200);
  --border-strong: var(--warm-300);
  --text:       var(--warm-900);
  --text-mute:  var(--warm-500);
  --primary:    var(--green-500);
  --primary-bg: var(--green-50);
  --primary-hover: var(--green-700);
  --accent:     var(--pink-300);
  --accent-bg:  var(--pink-50);
  --focus-ring: color-mix(in srgb, var(--primary) 40%, transparent);

  /* ── Type ──────────────────────────────────────── */
  --font-sans: 'Nunito', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;
  --fs-3xl:  2rem;
  --lh-tight:  1.2;
  --lh-normal: 1.55;
  --lh-loose:  1.75;

  /* ── Spacing ───────────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;

  /* ── Radius ────────────────────────────────────── */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-full: 9999px;

  /* ── Shadows ───────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(74, 69, 56, .06);
  --shadow-2: 0 6px 18px rgba(74, 69, 56, .08);
}

[data-theme="dark"] {
  --bg:         #1a2420;
  --surface:    #232e29;
  --surface-2:  #2c3833;
  --border:     #3a4641;
  --border-strong: #4d5b54;
  --text:       #ece7d8;
  --text-mute:  #9aa39a;
  --primary:    #a8cf8a;
  --primary-bg: #2b3a26;
  --primary-hover: #c0dc9f;
  --accent:     #f4a6b8;
  --accent-bg:  #3a2228;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-2: 0 6px 18px rgba(0, 0, 0, .35);
}

/* Auto theme follows system preference unless user picks explicitly. */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --bg:         #1a2420;
    --surface:    #232e29;
    --surface-2:  #2c3833;
    --border:     #3a4641;
    --border-strong: #4d5b54;
    --text:       #ece7d8;
    --text-mute:  #9aa39a;
    --primary:    #a8cf8a;
    --primary-bg: #2b3a26;
    --primary-hover: #c0dc9f;
    --accent:     #f4a6b8;
    --accent-bg:  #3a2228;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-2: 0 6px 18px rgba(0, 0, 0, .35);
  }
}

[data-density="compact"]     { --fs-base: 0.875rem; }
[data-density="comfortable"] { --fs-base: 1rem; }
[data-density="projection"]  { --fs-base: 1.5rem; }