:root {
  --color-page: #f1f1f1;
  --color-white: #ffffff;
  --color-ink: #212121;
  --color-ink-strong: #2b2b2b;
  --color-ink-90: #484848;
  --color-muted: #6d6d6d;
  --color-muted-70: #919191;
  --color-line: #d9d9d9;
  --color-line-soft: #e6e6e6;
  --color-surface: #f8f8f8;
  --color-blue: #007bff;
  --color-blue-30: #80bdff;
  --color-blue-40: #55a7ff;
  --color-blue-70: #0052aa;
  --color-blue-80: #003e80;
  --color-blue-90: #002955;
  --color-orange: #ffa800;

  --font-display: "Montserrat", sans-serif;
  --font-text: "Inter", sans-serif;

  --text-hero-size: 63px;
  --text-hero-line: 72px;
  --text-section-size: 48px;
  --text-section-line: 56px;
  --text-title-size: 32px;
  --text-title-line: 48px;
  --text-card-size: 24px;
  --text-card-line: 32px;
  --text-body-size: 18px;
  --text-body-line: 28px;
  --text-ui-size: 16px;
  --text-ui-line: 24px;
  --text-small-size: 14px;
  --text-small-line: 20px;
  --text-caption-size: 12px;
  --text-caption-line: 16px;
  --tracking-text: -0.02em;

  --space-page-x: 64px;
  --page-max: 1600px;
  --hero-copy: 732px;
  --radius-card: 20px;
  --radius-control: 12px;
  --shadow-xl: 0 10px 20px rgb(0 0 0 / 10%);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 200ms;
  --duration-section: 600ms;
}

@media (max-width: 767px) {
  :root {
    --space-page-x: 16px;
    --text-hero-size: 36px;
    --text-hero-line: 42px;
    --text-section-size: 32px;
    --text-section-line: 38px;
  }
}