:root {
  /* Morandi muted palette */
  --bg: #F2EFEB;
  --bg-alt: #ECE7E0;
  --surface: #E8E4DE;
  --surface-2: #DAD4CB;
  --glass: rgba(255, 253, 250, 0.55);
  --glass-strong: rgba(255, 253, 250, 0.78);
  --line: #D4CFC7;
  --line-soft: #E2DDD5;

  --ink: #23232A;
  --ink-soft: #5C5852;
  --ink-mute: #8A857E;

  --accent-sage: #8C9D8E;
  --accent-clay: #B89D8B;
  --accent-steel: #7A8694;
  --accent-ink: #2A2A2E;

  --signal: #6B7F73;

  /* Typography */
  --font-mono: ui-monospace, "JetBrains Mono", "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
  --font-display: var(--font-mono);

  /* Type scale */
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 22px;
  --fs-xl: 32px;
  --fs-2xl: clamp(40px, 6vw, 76px);
  --fs-3xl: clamp(56px, 9vw, 128px);

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  --section-pad: clamp(96px, 12vw, 160px);
  --container: 1240px;
  --container-narrow: 980px;

  /* Borders + radii */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-soft: 0 1px 2px rgba(35, 35, 42, 0.04), 0 8px 32px rgba(35, 35, 42, 0.06);
  --shadow-glass: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 8px 40px rgba(35, 35, 42, 0.08);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;
}