/* Wordlane design tokens — single source for all components.
   Scale: spacing 4px base, type ramp 1.25, radius soft, motion 150/300ms. */
:root {
  /* spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* type ramp */
  --font-size-xs: 0.75rem;
  --font-size-s: 0.875rem;
  --font-size-m: 1rem;
  --font-size-l: 1.25rem;
  --font-size-xl: 1.563rem;
  --font-size-2xl: 1.953rem;
  --line-height-body: 1.6;
  --line-height-tight: 1.2;

  /* color roles */
  --color-bg: #faf9f7;
  --color-surface: #ffffff;
  --color-text: #1a1a1a;
  --color-text-muted: #6b6b6b;
  --color-border: #e4e1dc;
  --color-accent: #0f6b5c;
  --color-accent-contrast: #ffffff;
  --color-danger: #b3261e;
  --color-warning: #8a5a00;
  --color-chip-bg: #efece7;
  --color-focus-ring: #0f6b5c;

  /* radius */
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;
  --radius-pill: 999px;

  /* motion */
  --motion-fast: 150ms;
  --motion-base: 300ms;
  --motion-ease: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #141414;
    --color-surface: #1e1e1e;
    --color-text: #f2f0ec;
    --color-text-muted: #a3a3a3;
    --color-border: #333333;
    --color-accent: #3ddbb9;
    --color-accent-contrast: #06231d;
    --color-danger: #f2b8b5;
    --color-warning: #e6c46a;
    --color-chip-bg: #2a2a2a;
    --color-focus-ring: #3ddbb9;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}