/*
 * Design tokens.
 * --u is one Figma pixel: it scales with the viewport and is capped at the
 * 1728px artboard (1px at a 16px root), so every Figma value N becomes
 * calc(N * var(--u)). Breakpoints override the tokens instead of shrinking
 * the desktop layout.
 *
 * Breakpoints: desktop (> 991), tablet portrait (≤ 991),
 * mobile landscape (≤ 767), mobile portrait (≤ 479).
 */
:root {
  /* colour */
  --c-red: #ff4229;
  --c-bg: #f3f4ed;
  --c-btn-text: #f3f4ed;
  --c-preloader: #e9eae0;
  --c-placeholder: #e2e3da;

  /* scale */
  --u: min(calc(100vw / 1728), 0.0625rem);
  --page-max: 108rem; /* 1728px */
  --page-w: min(100vw, var(--page-max));

  /* grid */
  --cols: 12;
  --margin: max(1.25rem, calc(80 * var(--u)));
  --gutter: 0.75rem; /* 12px at every width, as in the Figma grid */
  --col: calc((var(--page-w) - 2 * var(--margin) - (var(--cols) - 1) * var(--gutter)) / var(--cols));
  --span-2: calc(2 * var(--col) + var(--gutter));
  --page-left: max(0px, calc((100vw - var(--page-max)) / 2));

  /* type */
  --font: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --tracking: -0.06em;

  --fs-display-xl: max(4.5rem, calc(190 * var(--u)));
  --lh-display-xl: 0.85;
  --fs-logo: max(5.5rem, calc(170 * var(--u)));
  --lh-logo: 0.8;
  --fs-display-l: max(4.25rem, calc(152 * var(--u)));
  --lh-display-l: 0.86;
  --fs-copy-l: max(1.875rem, calc(52 * var(--u)));
  --lh-copy-l: 0.923; /* 48 / 52 */
  --fs-tagline: max(1.5rem, calc(42 * var(--u)));
  --lh-tagline: 0.952; /* 40 / 42 */
  --fs-heading-s: max(1.125rem, calc(30 * var(--u)));
  --lh-heading-s: 1.033; /* 31 / 30 */
  --fs-small: max(0.875rem, calc(18 * var(--u)));
  --lh-small: 1.1667; /* 21 / 18 */

  /* spacing (Figma values) */
  --sp-12: calc(12 * var(--u));
  --sp-24: max(1rem, calc(24 * var(--u)));
  --sp-48: max(1.5rem, calc(48 * var(--u)));
  --sp-80: max(2.5rem, calc(80 * var(--u)));
  --sp-120: max(3.5rem, calc(120 * var(--u)));
  --sp-160: max(4.5rem, calc(160 * var(--u)));
  --sp-200: max(5rem, calc(200 * var(--u)));

  /* motion (CSS-driven transitions; GSAP timings live in config.js) */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: ease;
  --dur-dim: 200ms;
  --dur-btn: 600ms;

  /* layers */
  --z-overlay: 900;
  --z-flip: 950;
  --z-preloader: 1000;
  --z-logo: 1001;

  /* slider */
  --cards-visible: 3.123; /* three full cards, the fourth cut by the viewport */
  --card-ratio: 515 / 676;
}

@media (max-width: 991px) {
  :root {
    --margin: 2rem;
    --gutter: 0.75rem;
    --fs-display-xl: 13vw;
    --fs-logo: 19vw;
    --fs-display-l: 12vw;
    --fs-copy-l: clamp(1.875rem, 4.6vw, 2.5rem);
    --fs-tagline: clamp(1.5rem, 3.6vw, 2rem);
    --fs-heading-s: clamp(1.25rem, 2.6vw, 1.5rem);
    --fs-small: 0.9375rem;
    --sp-80: 3rem;
    --sp-120: 4rem;
    --sp-160: 5rem;
    --sp-200: 6rem;
    --cards-visible: 1.85;
  }
}

@media (max-width: 767px) {
  :root {
    --margin: 1.25rem;
    --fs-display-xl: 11vw;
    --fs-logo: 17vw;
    --fs-display-l: 9vw;
    --fs-copy-l: 1.875rem;
    --fs-tagline: 1.5rem;
    --fs-heading-s: 1.25rem;
    --fs-small: 0.875rem;
    --cards-visible: 2.4;
  }
}

@media (max-width: 479px) {
  :root {
    --margin: 1rem;
    --fs-display-xl: 19vw;
    --fs-logo: 26.5vw;
    --fs-display-l: 14.5vw;
    --fs-copy-l: 1.75rem;
    --fs-tagline: 1.625rem;
    --fs-heading-s: 1.25rem;
    --cards-visible: 1.22;
  }
}