/* Design tokens — the single place a designer change lands.
 *
 * Every value is measured from the Figma file `FACIT NEW UPD 2026`, page
 * `Last version`, snapshot lastModified 2026-09-17T12:51:12Z. No value here is
 * invented; if the mock moves, this file moves and nothing else has to.
 *
 * Colours stay in hex rather than OKLCH on purpose: these are brand constants
 * (the NAVI yellow must be exactly #FFEE00 on every NAVI property), and a
 * round-trip through another colour space is a drift risk with no upside.
 */

:root {
  /* ---- Colour ----------------------------------------------------------
   * The mock's `colors` frame declares four tokens, but the page actually
   * paints with nine. All nine are canonical.
   */
  --c-bg: #010101;          /* page background — deliberately not pure black */
  --c-section: #000000;     /* prize + closing-CTA sections */
  --c-surface: #1e1e1e;     /* HOW TO PLAY section */
  --c-yellow: #ffee00;      /* brand accent, CTA fill, section titles */
  --c-white: #ffffff;       /* primary text */
  --c-muted: #c8c8c8;       /* card body, footer */
  --c-magenta: #e60e61;     /* hero glow, prize-tile gradient end */
  --c-hairline: #3d3d3d;    /* card border gradient start */
  --c-faceit: #f15822;      /* the FACEIT chevron in the headline */

  --c-header-bg: rgb(0 0 0 / 0.7);

  /* ---- Type ------------------------------------------------------------
   * Tablet 768 uses the same sizes as desktop 1920 in the mock, so the scale
   * is fixed above 768px and fluid only between 360px and 768px. Every pair
   * below is the measured mobile value interpolated to the measured desktop
   * value — not a guessed ratio.
   */
  --ff-display: "NAVI", "Arial Black", sans-serif;
  --ff-text: "Navi Text", "Helvetica Neue", Arial, sans-serif;

  --fs-h1: clamp(24px, calc(1.059px + 6.3725vw), 50px);
  --lh-h1: clamp(24px, calc(1.059px + 6.3725vw), 50px);
  --fs-lead: clamp(16px, calc(8.941px + 1.9608vw), 24px);
  --lh-lead: clamp(22px, calc(14.941px + 1.9608vw), 30px);
  --fs-bullet: clamp(12px, calc(4.941px + 1.9608vw), 20px);
  --lh-bullet: clamp(16px, calc(7.176px + 2.451vw), 26px);
  --fs-btn: clamp(18px, calc(12.706px + 1.4706vw), 24px);
  --lh-btn: clamp(22px, calc(15.824px + 1.7157vw), 29px);
  --fs-section: clamp(20px, calc(5.882px + 3.9216vw), 36px);
  --lh-section: clamp(23px, calc(7.118px + 4.4118vw), 41px);
  --fs-step-label: clamp(12px, calc(4.941px + 1.9608vw), 20px);
  --lh-step-label: clamp(16px, calc(7.176px + 2.451vw), 26px);
  --fs-card-title: clamp(20px, calc(16.471px + 0.9804vw), 24px);
  --lh-card-title: clamp(20px, calc(16.471px + 0.9804vw), 24px);
  --fs-card-body: clamp(14px, calc(10.471px + 0.9804vw), 18px);
  --lh-card-body: clamp(16px, calc(11.588px + 1.2255vw), 21px);
  --fs-tile: clamp(15px, calc(12.353px + 0.7353vw), 18px);
  --lh-tile: clamp(21px, calc(17.471px + 0.9804vw), 25px);
  --fs-micro: clamp(10px, calc(8.235px + 0.4902vw), 12px);
  --lh-micro: clamp(14px, calc(11.353px + 0.7353vw), 17px);
  --fs-ribbon: 9.14px;      /* "powered by" in the header tab: two fixed sizes, like the tab */
  --lh-ribbon: 12.8px;
  --fs-legal: clamp(14px, calc(10.471px + 0.9804vw), 18px);
  --lh-legal: clamp(16px, calc(11.588px + 1.2255vw), 21px);
  --fs-nav: 14px;
  --fs-footer: 12px;
  --lh-footer: 14px;

  --tracking-h1: 0.05em;    /* 2.5px at the 50px desktop size */

  /* ---- Space — 4px system, values taken from the mock's auto-layout ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-11: 44px;
  --sp-12: 48px;
  --sp-15: 60px;
  --sp-16: 64px;

  --container: 1232px;
  --section-pad-x: clamp(20px, calc(-53.529px + 9.5588vw), 104px);
  --section-pad-y: clamp(40px, calc(22.353px + 4.902vw), 60px);
  /* The header as laid out: the 72px bar plus the tab hanging 40px below it.
   * The mock's Header frame says 115 only because its stroke overhangs. */
  --header-h: 112px;

  /* ---- Radius — one system. 30 for cards, 15 for the images inside
   * them, 10 for the button. Nothing else introduces a radius. */
  --r-card: 30px;
  --r-media: 15px;
  --r-btn: 10px;

  /* ---- Depth ----------------------------------------------------------
   * Real elevation: an offset plus a soft blur, not a zero-offset halo.
   */
  --shadow-card: 0 18px 40px rgb(0 0 0 / 0.55);
  --border-card: linear-gradient(180deg, var(--c-hairline) 0%, var(--c-bg) 100%);
  --fill-tile: linear-gradient(180deg, var(--c-bg) 0%, var(--c-magenta) 100%);

  /* ---- Motion ---------------------------------------------------------
   * Smooth deceleration, never overshoot: a cubic-bezier whose y exceeds 1
   * reads as dated bounce. The 300ms scroll value is the one the Figma
   * prototype specifies for `Learn more`.
   */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-reveal: 500ms;
  --dur-scroll: 300ms;
}

@media (min-width: 768px) {
  :root {
    --fs-ribbon: 14px;
    --lh-ribbon: 19.6px;
  }
}