/* Self-hosted variable grotesque (OFL) — single 34KB file covers 100–900 */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/hanken.woff2?v=2') format('woff2');
}

:root {
  /* --- Core palette (locked 2026-05-26, white/crisp direction) --- */
  --bg:    #ffffff;   /* dominant — page, card, nav background */
  --ink:   #161616;   /* primary text, headings, ATC buttons */
  --sub:   #565656;   /* secondary text, eyebrows, labels — darkened 2026-05-31 for legibility */
  --line:  #ededed;   /* borders, dividers, chip outlines */
  --soft:  #fafafa;   /* subtle fills, hover surfaces */

  /* --- Accent (locked 2026-05-26: monochrome/pure) --- */
  --accent: #161616;  /* = --ink; swappable token for future brand colour */
  /* rejected candidates: Bronze #b07a4f, Ocean #1c5a72, Terracotta #c2603c */

  /* --- Semantic aliases (keep for component code clarity) --- */
  --surface:     var(--bg);
  --surface-alt: var(--soft);
  --text:        var(--ink);
  --text-muted:  var(--sub);
  --border:      var(--line);

  /* --- Typography --- */
  /* All-sans, single grotesque (Rhode-style). --serif retained as a token name only. */
  --serif: 'Hanken Grotesk', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --sans:  'Hanken Grotesk', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* Type scale — exactly 4 sizes */
  --text-display: clamp(1.25rem, 1rem + 1.5vw, 1.75rem); /* bento/section headings */
  --text-name:    1rem;       /* 16px — product name (card); kept at 16 to avoid name/price row wrap */
  --text-body:    0.9375rem;  /* 15px — body / nav / price (was 14px; bumped for legibility) */
  --text-label:   0.8125rem;  /* 13px — label / eyebrow / tagline strip (was 12px) */

  /* Weights — exactly 2 */
  --w-regular: 400;
  --w-semi:    600;

  /* Spacing scale */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Layout */
  --nav-h:     52px;
  --tagline-h: 20px;
  --gap:       clamp(8px, 3vw, 28px);
  /* Page gutter — the editorial "mat" margin framing every page, mobile to
     desktop. Was clamp(14px, 3vw, 28px); widened 2026-07-15 so content
     reads as deliberately framed rather than flush against the viewport. */
  --gutter:    clamp(20px, 6vw, 72px);

  /* Motion */
  --ease:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-sheet: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-fast:   150ms;
  --dur-mid:    240ms;
  --dur-fade:   180ms;

  color-scheme: light;
}