:root {
  --color-ink: #302c29;
  --color-ink-soft: #67605a;
  --color-paper: #f8f2e9;
  --color-surface: #fffaf3;
  --color-surface-raised: #ffffff;
  --color-border: #ded2c4;
  --color-accent: #786454;
  --color-accent-strong: #574538;
  --color-accent-soft: #eadbca;
  --color-lamp: #e7bd72;
  --color-focus: #3c6f85;
  --color-shadow: rgba(67, 52, 42, 0.14);
  --font-family-body: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  --font-family-display: Georgia, "Times New Roman", serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.2rem;
  --font-size-xl: clamp(1.6rem, 4vw, 2.35rem);
  --font-size-hero: clamp(2rem, 7vw, 4.8rem);
  --line-height-tight: 1.06;
  --line-height-body: 1.55;
  --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: 4.5rem;
  --radius-sm: 0.55rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px;
  --shadow-card: 0 1rem 2.5rem var(--color-shadow);
  --layout-max: 70rem;
  --layout-text: 44rem;
  --control-min: 2.75rem;
  --demo-ratio: 56.25%;
  --motion-fast: 120ms;
  --motion-crossfade: 200ms;
  --motion-slow: 420ms;
}