:root {
  /* ===== Color tokens ===== */
  --white:      #FFFFFF;
  --bg:         #FAFAF8;
  --border:     #E2E8F0;
  --color-main: #111111;
  --color-body: #444444;
  --navy:       #203864;
  --surface:    #E6EFF8;
  --accent:     #92E5FF;
  --cyan:       #0090C0;

  /* ===== Typography ===== */
  --font-family: 'Inter', 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN',
                 system-ui, -apple-system, sans-serif;

  /* ===== Type Scale ===== */
  --text-deco:    clamp(40px, 6vw, 56px);
  --text-display: clamp(36px, 5vw, 52px);
  --text-h1:      clamp(28px, 4vw, 40px);
  --text-h2:      clamp(20px, 2.5vw, 26px);
  --text-h3:      clamp(20px, 2vw, 22px);
  --text-body-lg: 18px;
  --text-body:    16px;
  --text-caption: 14px;
  --text-micro:   12px;

  /* ===== Illustration / Icon Sizes ===== */
  --icon-step: 32px;

  /* ===== Spacing Tokens ===== */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;

  /* ===== Line Heights ===== */
  --lh-deco:     1.0;
  --lh-display:  1.1;
  --lh-h1:       1.2;
  --lh-h2:       1.25;
  --lh-h3:       1.3;
  --lh-body-lg:  1.6;
  --lh-body:     1.75;
  --lh-caption:  1.4;
  --lh-micro:    1.4;

  /* ===== Letter Spacings ===== */
  --ls-deco:     0.05em;
  --ls-display: -0.02em;
  --ls-h1:      -0.01em;
  --ls-h2:       0;
  --ls-h3:       0;
  --ls-body-lg:  0;
  --ls-body:     0;
  --ls-caption:  0.04em;
  --ls-micro:    0.06em;

  /* ===== Font Weights ===== */
  --fw-regular:  400;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ===== Section Spacing ===== */
  --section-py: 64px;
  --section-px: 12px;

  /* ===== Layout ===== */
  --container: 960px;

  /* ===== Borders ===== */
  --radius-sm:   8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-full: 9999px;

  /* ===== Logo Sizes ===== */
  --logo-h-sm: 24px;
  --logo-h-md: 26px;
  --logo-h-lg: 28px;
}

@media (max-width: 768px) {
  :root {
    --lh-display:  1.15;
    --lh-h1:       1.25;
    --lh-h2:       1.3;
    --lh-h3:       1.35;
    --lh-body-lg:  1.65;
    --lh-body:     1.85;
    --lh-caption:  1.45;
    --lh-micro:    1.45;
  }
}

@media (min-width: 768px) {
  :root {
    --section-py: 88px;
    --section-px: 48px;
  }
}

@media (min-width: 1024px) {
  :root {
    --section-py: 120px;
    --section-px: 64px;
  }
}