/* ==========================================================================
   Fitness Auction — Design tokens
   Single source of truth for colour, type, spacing and motion.
   ========================================================================== */

:root {
  /* Colour — light surfaces (warm stone, never pure white) */
  --bone: #f0eee9;
  --paper: #f8f7f4;
  --stone: #e2dfd8;
  --ink: #141413;
  --ink-fixed: #141413; /* never remapped by surfaces */
  --ink-2: #57554f;
  --ink-3: #6f6c65;
  --line: rgba(20, 20, 19, 0.14);
  --line-strong: rgba(20, 20, 19, 0.32);

  /* Colour — cinematic dark surfaces */
  --noir: #0c0c0b;
  --noir-2: #151514;
  --noir-3: #1f1f1d;
  --on-noir: #ecebe6;
  --on-noir-2: #9a978f;
  --on-noir-3: #8d8a83;
  --line-noir: rgba(236, 235, 230, 0.14);
  --line-noir-strong: rgba(236, 235, 230, 0.34);

  /* One restrained signal, only for live state */
  --signal: #9dbf8a;
  --error: #a4552f;

  /* Type */
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  /* Figures and micro labels. Not a monospace: Plex Mono set a dot inside
     the zero and read softer than the rest of the page. Tabular figures on
     .num keep prices and the countdown from shifting width. */
  --font-figure: "Archivo", "Helvetica Neue", Arial, sans-serif;
  /* Navigation runs on Arial: at 13px it stays sharper than the display face. */
  --font-nav: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --wdth-display: 112;
  --wdth-text: 100;

  --fs-display: clamp(2.75rem, 1.2rem + 6.6vw, 7.75rem);
  --fs-h1: clamp(2.25rem, 1.3rem + 4vw, 5rem);
  --fs-h2: clamp(1.875rem, 1.25rem + 2.6vw, 3.5rem);
  --fs-h3: clamp(1.375rem, 1.1rem + 1.1vw, 2rem);
  --fs-lead: clamp(1.25rem, 1rem + 1.1vw, 1.875rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.6875rem;

  --lh-tight: 1;
  --lh-snug: 1.12;
  --lh-body: 1.6;

  --track-display: -0.035em;
  --track-heading: -0.02em;
  --track-micro: 0.12em;

  /* Space */
  --gutter: clamp(20px, 4vw, 64px);
  --max: 1520px;
  --section: clamp(96px, 11vw, 192px);
  --section-sm: clamp(64px, 7vw, 120px);
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;

  /* Shape */
  --radius: 2px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 220ms;
  --t-base: 520ms;
  --t-slow: 1100ms;
  --t-reveal: 1400ms;

  --header-h: 76px;
}

@media (max-width: 760px) {
  :root {
    --header-h: 64px;
  }
}