/* Design tokens — palette, typography, spacing, motion.
   Style direction: "warm study journal" — kem ấm + teal accent. */

:root {
  /* Surfaces & text (light) */
  --color-bg: oklch(97% 0.012 85);
  --color-surface: oklch(99% 0.008 85);
  --color-surface-2: oklch(95% 0.014 85);
  --color-surface-3: oklch(92% 0.016 80);
  --color-text: oklch(26% 0.02 70);
  --color-text-soft: oklch(45% 0.02 70);
  --color-text-faint: oklch(60% 0.015 70);
  --color-border: oklch(88% 0.014 75);

  /* Brand & accents */
  --color-accent: oklch(58% 0.10 195);        /* teal */
  --color-accent-strong: oklch(48% 0.11 195);
  --color-accent-soft: oklch(93% 0.04 195);
  --color-warm: oklch(68% 0.13 55);           /* cam đất */
  --color-warm-soft: oklch(94% 0.05 60);

  /* Semantic study status */
  --status-new: oklch(70% 0.01 70);           /* xám — chưa học */
  --status-new-soft: oklch(93% 0.01 70);
  --status-learning: oklch(72% 0.14 75);      /* vàng/cam — đang học */
  --status-learning-soft: oklch(94% 0.06 80);
  --status-known: oklch(60% 0.13 155);        /* xanh — đã thuộc */
  --status-known-soft: oklch(93% 0.06 155);

  /* Typography */
  --font-display: "Iowan Old Style", "Palatino Linotype", "Georgia", serif;
  --font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;

  --text-xs: 0.78rem;
  --text-sm: 0.88rem;
  --text-base: clamp(1rem, 0.95rem + 0.2vw, 1.06rem);
  --text-lg: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  --text-xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --text-2xl: clamp(2rem, 1.5rem + 2.2vw, 3rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-section: clamp(2rem, 1.5rem + 3vw, 4rem);

  /* Radius & depth */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px oklch(40% 0.02 70 / 0.08), 0 2px 6px oklch(40% 0.02 70 / 0.06);
  --shadow-md: 0 4px 12px oklch(40% 0.02 70 / 0.10), 0 12px 28px oklch(40% 0.02 70 / 0.08);
  --shadow-lg: 0 10px 30px oklch(40% 0.02 70 / 0.14), 0 24px 60px oklch(40% 0.02 70 / 0.10);

  /* Motion */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --maxw: 1080px;
}

[data-theme="dark"] {
  --color-bg: oklch(22% 0.012 260);
  --color-surface: oklch(26% 0.014 260);
  --color-surface-2: oklch(30% 0.016 260);
  --color-surface-3: oklch(34% 0.018 260);
  --color-text: oklch(93% 0.01 90);
  --color-text-soft: oklch(78% 0.012 90);
  --color-text-faint: oklch(64% 0.012 90);
  --color-border: oklch(38% 0.016 260);

  --color-accent: oklch(72% 0.11 195);
  --color-accent-strong: oklch(80% 0.10 195);
  --color-accent-soft: oklch(34% 0.05 200);
  --color-warm: oklch(76% 0.12 60);
  --color-warm-soft: oklch(34% 0.05 55);

  --status-new: oklch(62% 0.01 90);
  --status-new-soft: oklch(33% 0.01 260);
  --status-learning: oklch(78% 0.13 80);
  --status-learning-soft: oklch(36% 0.05 80);
  --status-known: oklch(72% 0.13 155);
  --status-known-soft: oklch(34% 0.06 160);

  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.3), 0 2px 6px oklch(0% 0 0 / 0.25);
  --shadow-md: 0 4px 12px oklch(0% 0 0 / 0.35), 0 12px 28px oklch(0% 0 0 / 0.28);
  --shadow-lg: 0 10px 30px oklch(0% 0 0 / 0.4), 0 24px 60px oklch(0% 0 0 / 0.32);
}