:root {
  /* Figma paint styles (frame 212:1644) */
  --color-bg: #000000;
  --color-cream: #f2ede8;
  --color-white: #ffffff;
  --color-gold: #c8a96e;
  --color-reward-gold: #c5a059;
  --color-muted: #a8a098;
  --color-stroke: #272420;
  --color-section-dark: #100e0c;
  --color-card-dark: #181614;
  --color-ink: #0a0908;
  /* Hero captions: bg #54534a at 0.7 alpha; text stays solid white */
  --color-hero-caption-bg: rgba(84, 83, 74, 0.7);
  --color-hero-caption-text: #ffffff;
  /* Wider than 486px Figma so JP lines stay single-line; capped by viewport */
  --hero-typ-group-w: 48rem;
  --hero-typ-bar-h: 2.25rem; /* 36px Rectangle 35 */
  --hero-typ-pill-max: 38rem;
  --hero-typ-bar-pill-gap: 0.4375rem; /* 7px */
  --hero-logo-typ-gap: 2.1875rem; /* 35px logo bottom to typ (397+88 vs 520) */
  --hero-pill-pad-t: 0.2525rem; /* ~4.043px */
  --hero-pill-pad-x: 1.06125rem; /* ~16.982px */
  --hero-pill-pad-b: 0.354375rem; /* ~5.661px */
  --hero-bar-pad-x: 1.15625rem; /* ~(486-449)/2 */

  --font-en: "Lexend Exa", system-ui, sans-serif;
  --font-jp: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-ui: "Cabin", system-ui, sans-serif;

  --text-eyebrow: 0.625rem;
  --text-xs: 0.5625rem;
  --text-sm: 0.75rem;
  --text-body: 0.75rem;
  --text-md: 0.875rem;
  --text-lg: 1rem;
  --text-xl: 1.5rem;
  --text-hero-num: 3.214rem;

  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 2.5rem;
  --space-section: 3rem;

  /* Page gutters: 200px each side on large screens (see base .container) */
  --container: 100%;
  --container-margin-x: 12.5rem; /* 200px @ 16px */
  --container-pad-x: 1.21875rem; /* fallback on narrow viewports */
  --radius-sm: 4px;
  --radius-md: 8px;
}

@media (min-width: 480px) {
  :root {
    --container-pad-x: clamp(1.21875rem, 4vw, 3rem);
  }
}

@media (min-width: 768px) {
  :root {
    --container-pad-x: clamp(1.5rem, 5vw, 4rem);
    --space-section: 3.25rem;
    --text-xl: 1.625rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --container-pad-x: clamp(2rem, 6vw, 5rem);
    --space-section: 3.5rem;
    --text-xl: 1.75rem;
  }
}