:root {
  /* Color */
  --color-bg: #f8f8f6;
  --color-bg-alt: #f4f3f0;
  --color-surface: #ffffff;
  --color-text: #0e0e0e;
  --color-text-muted: #6f6f6a;
  --color-line: #deded8;
  --color-accent: #D76448;
  --color-accent-soft: #f1e5b9;

  /* Typography */
  --font-sans: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.5rem;
  --fs-3xl: 4rem;
  --fs-4xl: 6rem;
  --fs-5xl: 8rem;

  /* Layout */
  --page-max: 1600px;
  --page-pad: 48px;
  --grid-gap: 24px;
  --text-max: 720px;
  --text-narrow: 560px;

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

  /* Section rhythm
     The outer rhythm is shared by every content section: the top breathes
     less than the bottom so each section settles before the next one begins. */
  --section-pad-top: clamp(56px, 4vw, 72px);
  --section-pad-bottom: clamp(80px, 6vw, 104px);
  --section-rule-gap: 24px;

  /* Motion / shape */
  --radius-sm: 6px;
  --radius-md: 14px;
  --ease: cubic-bezier(.22,.8,.22,1);
}

@media (max-width: 1024px) {
  :root {
    --page-pad: 32px;
    --grid-gap: 20px;
  }
}

@media (max-width: 780px) {
  :root {
    --section-pad-top: 44px;
    --section-pad-bottom: 68px;
    --section-rule-gap: 18px;
  }
}

@media (max-width: 640px) {
  :root {
    --page-pad: 20px;
    --grid-gap: 16px;
  }
}