/* Settings — tokens */
:root {
  --color-base: #f7f9fc;
  --color-surface: #ffffff;
  --color-ink: #1a2332;
  --color-ink-soft: #4a5568;
  --color-slate: #5b7a9d;
  --color-slate-deep: #3d5a7a;
  --color-lime: #b8e038;
  --color-lime-deep: #8fbc1a;
  --color-lime-tint: rgba(184, 224, 56, 0.18);
  --color-slate-tint: rgba(91, 122, 157, 0.12);
  --color-border: #c5d0de;
  --color-aurora-1: rgba(91, 122, 157, 0.28);
  --color-aurora-2: rgba(184, 224, 56, 0.22);
  --color-aurora-3: rgba(120, 160, 210, 0.2);

  --font-serif: "Libre Baskerville", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1.0625rem;
  --font-size-md: 1.25rem;
  --font-size-lg: 1.75rem;
  --font-size-xl: 2.5rem;
  --font-size-hero: clamp(1.75rem, 4vw, 2.75rem);

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;

  --radius-card: 1.25rem;
  --radius-badge: 999px;
  --radius-header: 1rem 1rem 0 0;

  --shadow-tile: 0 8px 28px rgba(26, 35, 50, 0.08);
  --border-key: 2px solid var(--color-border);
  --max-content: 68rem;
  --nav-width: 14rem;
  --age-bar-h: 2.75rem;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion: 0s;
  }
}