/* Study Pill — design tokens.
 *
 * The single source of truth for color, type, spacing, radius, shadow, motion.
 * Loaded ahead of every other stylesheet. Two themes: warm-paper (default)
 * and dark. Every screen pulls from these tokens — no parallel palettes.
 *
 * Naming convention: --sp-<category>-<role> for new tokens; legacy --paper /
 * --ink / --coral aliases are preserved so existing CSS keeps working while
 * the migration is incremental, not a big-bang rewrite.
 */
:root {
  /* ---- color: paper / surface ---- */
  --sp-paper:        oklch(96.5% 0.018 85);
  --sp-paper-2:      oklch(94% 0.025 82);
  --sp-paper-edge:   oklch(88% 0.035 80);
  --sp-cream:        oklch(92% 0.04 85);

  /* ---- color: ink / text ---- */
  --sp-ink:          oklch(18% 0.02 60);
  --sp-ink-2:        oklch(32% 0.02 60);
  --sp-ink-soft:     oklch(48% 0.02 60);

  /* ---- color: rule / border ---- */
  --sp-rule:         oklch(84% 0.025 75);
  --sp-rule-soft:    oklch(88% 0.02 75 / .6);

  /* ---- color: brand + state ---- */
  --sp-coral:        oklch(60% 0.215 25);
  --sp-coral-2:      oklch(70% 0.2 30);
  --sp-coral-deep:   oklch(35% 0.15 25);
  --sp-highlight:    oklch(93% 0.17 98);
  --sp-highlight-2:  oklch(95% 0.12 98 / .65);
  --sp-pine:         #10B981;
  --sp-pine-soft:    oklch(95% 0.06 160);
  --sp-amber:        oklch(70% 0.15 80);
  --sp-amber-soft:   oklch(95% 0.10 90);

  /* ---- typography: families ---- */
  --sp-font-display: 'Newsreader', Georgia, serif;
  --sp-font-italic:  'Instrument Serif', Georgia, serif;
  --sp-font-prose:   'Literata', Georgia, serif;
  --sp-font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sp-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --sp-font-hand:    'Caveat', cursive;

  /* ---- spacing scale (4px base) ---- */
  --sp-space-1:  4px;
  --sp-space-2:  8px;
  --sp-space-3:  12px;
  --sp-space-4:  16px;
  --sp-space-5:  20px;
  --sp-space-6:  24px;
  --sp-space-7:  32px;
  --sp-space-8:  40px;
  --sp-space-9:  48px;
  --sp-space-10: 64px;

  /* ---- radius ---- */
  --sp-radius-xs: 6px;
  --sp-radius-sm: 10px;
  --sp-radius-md: 14px;
  --sp-radius-lg: 20px;
  --sp-radius-xl: 28px;

  /* ---- elevation ---- */
  --sp-lift-1: 0 1px 2px oklch(18% 0.02 60 / .05);
  --sp-lift-2: 0 2px 4px oklch(18% 0.02 60 / .04), 0 8px 24px oklch(18% 0.02 60 / .06);
  --sp-lift-3: 0 4px 8px oklch(18% 0.02 60 / .05), 0 20px 48px oklch(18% 0.02 60 / .10);

  /* ---- motion ---- */
  --sp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sp-ease-spring: cubic-bezier(0.2, 0.9, 0.3, 1.1);
  --sp-dur-fast: .12s;
  --sp-dur-base: .22s;
  --sp-dur-slow: .35s;

  /* ---- legacy aliases (kept until every callsite migrates) ---- */
  --paper:        var(--sp-paper);
  --paper-2:      var(--sp-paper-2);
  --paper-edge:   var(--sp-paper-edge);
  --cream:        var(--sp-cream);
  --ink:          var(--sp-ink);
  --ink-2:        var(--sp-ink-2);
  --ink-soft:     var(--sp-ink-soft);
  --rule:         var(--sp-rule);
  --rule-soft:    var(--sp-rule-soft);
  --coral:        var(--sp-coral);
  --coral-2:      var(--sp-coral-2);
  --coral-deep:   var(--sp-coral-deep);
  --highlight:    var(--sp-highlight);
  --highlight-soft: var(--sp-highlight-2);
  --pine:         var(--sp-pine);
  --pine-soft:    var(--sp-pine-soft);
  --lift-1:       var(--sp-lift-1);
  --lift-2:       var(--sp-lift-2);
  --lift-3:       var(--sp-lift-3);
  --radius-xs:    var(--sp-radius-xs);
  --radius-sm:    var(--sp-radius-sm);
  --radius-md:    var(--sp-radius-md);
  --radius-lg:    var(--sp-radius-lg);
  --ease-out:     var(--sp-ease-out);
}

/* Dark theme — opt-in via `html[data-theme="dark"]`. */
html[data-theme="dark"] {
  color-scheme: dark;
  --sp-paper:      oklch(16% 0.015 60);
  --sp-paper-2:    oklch(20% 0.018 60);
  --sp-paper-edge: oklch(26% 0.02 60);
  --sp-cream:      oklch(22% 0.02 82);
  --sp-ink:        oklch(96% 0.015 85);
  --sp-ink-2:      oklch(86% 0.02 80);
  --sp-ink-soft:   oklch(72% 0.025 78);
  --sp-rule:       oklch(32% 0.02 70);
  --sp-rule-soft:  oklch(30% 0.02 70 / .6);
  --sp-coral:      oklch(72% 0.2 28);
  --sp-coral-2:    oklch(78% 0.2 32);
  --sp-coral-deep: oklch(60% 0.18 26);
  --sp-highlight:  oklch(80% 0.17 98 / .28);
  --sp-highlight-2:oklch(80% 0.17 98 / .16);
  --sp-pine:       #2DE3A8;
  --sp-pine-soft:  oklch(30% 0.09 160);
  --sp-lift-1: 0 1px 2px oklch(0% 0 0 / .35);
  --sp-lift-2: 0 2px 4px oklch(0% 0 0 / .35), 0 8px 24px oklch(0% 0 0 / .45);
  --sp-lift-3: 0 4px 8px oklch(0% 0 0 / .40), 0 20px 48px oklch(0% 0 0 / .55);
}