:root {
  --color-bg: #f2f2f2;
  --color-white: #ffffff;
  --color-text-strong: #171717;
  --color-text-sub: #5c5c5c;
  --color-border-subtle: #ebebeb;
  --color-button-ring: #1f1f1f;
  --color-claude: #d97757;

  --font-family: "Inter Tight", system-ui, -apple-system, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  --radius-pill: 9999px;
  --radius-control: 12px;
  --radius-circle: 999px;

  --space-page-y: 40px;
  --space-section: 72px;
  --space-nav-x: 32px;
  --space-nav-y: 16px;
  --space-hero-gap: 35px;
  --space-text-gap: 24px;
  --space-form-gap: 16px;
  --space-footer-gap: 24px;
  --space-page-x: 24px;

  --size-nav-max: 800px;
  --size-hero-max: 632px;
  --size-text-max: 536px;
  --size-control-height: 52px;
  --size-avatar: 48px;
  --size-avatar-icon: 24px;
  --size-logo-mark-w: 30px;
  --size-logo-mark-h: 24px;
  --size-wordmark-w: 60.5px;
  --size-wordmark-h: 15.5px;
  --size-chevron: 20px;

  --shadow-button:
    0 0 0 1px var(--color-button-ring),
    0 4px 12px -3px rgba(0, 0, 0, 0.2);
  --shadow-button-inset: inset 0 -2px 0 0 rgba(0, 0, 0, 0.1);
}