:root {
  /* Color */
  --color-primary: #f26a4b;
  --color-warm: #f8f7f4;
  --color-white: #ffffff;
  --color-lightgray: #f8f8f8;
  --color-dark: #171717;
  --color-black: #3e3533;
  --color-darkgray: #8f8f8f;
  --color-border: #c7c7c7;

  /* Container — Global */
  --container-max: 1560px;
  --gutter-fluid: clamp(40px, 9.375vw, 180px);
  --gutter-mobile: 20px;
  --gutter: var(--gutter-fluid);

  /* Typography — Desktop baseline (1920px Figma) */
  --font-family: "SUIT Variable", sans-serif;

  --text-hero: clamp(2.438rem, 7vw, 7rem);
  --text-hero-lh: 1.1;
  /* display > title-large > h2 > subtitle > body-md — min values step down one level */
  --text-h2: clamp(1.375rem, 1.764vw, 2.115rem);
  --text-h2-lh: 1.4;
  --text-subtitle: clamp(1.041rem, 1.386vw, 1.665rem);
  --text-subtitle-lh: 1.714;
  --text-body-md: clamp(0.969rem, 1.161vw, 1.395rem);
  --text-body-md-lh: 1.833;
  --text-display: clamp(1.7rem, 2.8125vw, 3.375rem);
  --text-display-lh: 1.25;
  --text-title-large: clamp(1.625rem, 2.7vw, 3.25rem);
  --text-title-large-lh: 1.333;

  --letter-tight: -0.02em;

  /* Motion — card image hover zoom */
  --motion-image-zoom-scale: 1.07;
  --motion-image-zoom-ease: cubic-bezier(0.33, 1, 0.68, 1);
  --motion-image-zoom-in: 0.6s var(--motion-image-zoom-ease);
  --motion-image-zoom-out: 0.9s var(--motion-image-zoom-ease);
  --motion-overlay-fade: 0.6s ease;

  /* Motion — scroll reveal */
  --motion-reveal-distance: 1.5rem;
  --motion-reveal-ease: cubic-bezier(0.33, 1, 0.68, 1);
  --motion-reveal-duration: 0.7s;

  /* Breakpoints (reference) */
  --bp-tablet: 1024px;
  --bp-mobile: 767px;
}

@media (max-width: 767px) {
  :root {
    --gutter: var(--gutter-mobile);
  }
}