:root {
  --color-bg: #FAFAF7;
  --color-surface: #FFFFFF;
  --color-ink: #111111;
  --color-ink-60: #5C5C5C;
  --color-ink-40: #8A8A8A;
  --color-border: #E8E5DE;
  --color-accent: #1A3A5C;
  --color-accent-hover: #15304C;

  --font-sans: "IBM Plex Sans", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-serif: "Fraunces", "Noto Sans JP", Georgia, "Hiragino Mincho ProN", serif;

  --fs-hero: clamp(2.25rem, 5.5vw, 4.5rem);
  --fs-h1: clamp(1.875rem, 4vw, 3rem);
  --fs-h2: clamp(1.5rem, 3vw, 2.125rem);
  --fs-h3: 1.125rem;
  --fs-body: 1rem;
  --fs-lead: clamp(1.0625rem, 1.6vw, 1.25rem);
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;

  --tracking-body: 0.03em;
  --tracking-display: -0.02em;
  --tracking-eyebrow: 0.22em;
  --tracking-brand: -0.015em;

  --lh-tight: 1.3;
  --lh-normal: 1.7;
  --lh-relaxed: 1.8;

  --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;
  --space-9: 6rem;
  --space-10: 8rem;

  --container-max: 1120px;
  --container-padding: 1.75rem;
  --radius: 8px;

  --ease-refined: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms var(--ease-refined);
  --header-height: 64px;
}

@media (min-width: 640px) {
  :root {
    --container-padding: 2rem;
  }
}