@layer reset, base, layout, components, utilities;

/* ─── Design tokens ──────────────────────────────────────── */

:root {
  /* 1. Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* 2. Typography */
  --font-body: 'EB Garamond', serif;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  /* 3. OKLCH raw values (for color-mix and opacity variants) */
  --lch-ink-darkest:  25% 0.01 264;
  --lch-ink-dark:     45% 0.01 264;
  --lch-ink-medium:   60% 0.01 264;
  --lch-ink-light:    80% 0.01 264;
  --lch-ink-lighter:  87% 0.01 264;
  --lch-white:        100% 0 0;
  --lch-green-dark:   35% 0.10 155;
  --lch-green-medium: 62% 0.15 155;
  --lch-green-muted:  90% 0.06 155;
  --lch-green-subtle: 97% 0.02 155;

  /* Named semantic colors */
  --color-text:         oklch(var(--lch-ink-darkest));
  --color-text-muted:   oklch(var(--lch-ink-dark));
  --color-text-subtle:  oklch(var(--lch-ink-medium));
  --color-border:       oklch(var(--lch-ink-light));
  --color-border-light: oklch(var(--lch-ink-lighter));
  --color-bg-subtle:    oklch(var(--lch-green-subtle));
  --color-accent:       oklch(var(--lch-green-medium));
  --color-accent-muted: oklch(var(--lch-green-muted));
  --color-accent-text:  oklch(var(--lch-green-dark));
  --color-canvas:       oklch(var(--lch-white));
  --color-surface:      oklch(var(--lch-white) / 80%);

  /* 4. Layout */
  --header-height: var(--space-12);
  --footer-height: var(--space-12);
  --content-max:   56rem;
  --content-mid:   28rem;

  /* 5. Z-index */
  --z-content: 10;
  --z-nav:     50;

  /* 6. Focus ring */
  --focus-ring-size:   2px;
  --focus-ring-offset: 1px;
  --focus-ring-color:  var(--color-accent);
  --focus-ring:        var(--focus-ring-size) solid var(--focus-ring-color);

  /* 7. Easing */
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-smooth: cubic-bezier(0.25, 1.25, 0.5, 1);
}