/* ==========================================================================
   tokens.css — the single source of visual truth.
   Rules elsewhere reference these variables, never raw values.
   Promotion rule: used once → stays inline. Used twice → becomes a token.
   ========================================================================== */

:root {
  /* --- Typeface ------------------------------------------------------- */
  --font-sans: "IQOS", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-bold: 700;

  /* --- Design unit ----------------------------------------------------- */
  /* The design is specified at exactly 393px. `--u` equals 1 design pixel:
     it tracks the viewport below 393px so the layout scales proportionally
     instead of overflowing, and locks at 1px above it.
     0.25445vw x 393 = 1.00px. Use as calc(28 * var(--u)) — reads as design px. */
  --u: min(0.25445vw, 1px);

  /* --- Color ---------------------------------------------------------- */
  /* Measured off the snapshots and bg_gradient.png, not eyeballed. */
  --color-text: #ffffff;
  --color-bg: #00002e;          /* base gradient, top-left */
  --color-ink: #0d043c;         /* deep navy, hero lower edge */
  --color-magenta: #b21996;     /* base gradient, bottom-left */
  --color-accent: #ff42e0;      /* carousel active indicator */

  /* Hero overlay ramp — section 1 replaces the base gradient with its own
     horizontal ramp. Sampled at x = 1/25/50/75/99% in the clean top band. */
  --hero-1: #000437;
  --hero-2: #000a43;
  --hero-3: #001554;
  --hero-4: #001f6c;
  --hero-5: #002c86;

  /* --- Type scale ------------------------------------------------------ */
  /* Every size solved from glyph ink widths measured off the snapshots.
     Agreement across independent strings was within 0.3px in every group,
     so these are the design's actual values, not approximations. */
  --fs-display: 30;   /* hero headline (uppercase)          */
  --fs-h2: 40.4;        /* section headings, sections 2/3/7   */
  --fs-h3: 28.5;        /* section headings, sections 4/5/6   */
  --fs-body: 24.45;      /* body copy                          */
  --fs-sub: 20.35;       /* subheads under the small headings  */

  --lh-heading: 1.3;
  --lh-body: 1.42;
  --lh-sub: 1.38;

  /* --- Spacing -------------------------------------------------------- */
  /* 4px base scale, chosen because it divides the 393px design width
     cleanly and matches Figma's default nudge increment. */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* Horizontal page gutter. Interim value — Task 5 measures the real one
     off snapshot 1 and overwrites it here. */
  --gutter: var(--space-5);

  /* --- Radii ---------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* --- Motion --------------------------------------------------------- */
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}