/*
  TENLAKES DESIGN TOKENS — single source of truth for every style value.
  Rules: all colors, fonts, type, and layout values are defined HERE and only here.
  Pages consume var(--token); never hardcode a value in page CSS.
  Changing a token changes the whole site on the next deploy.
*/
:root {
  /* Color */
  --color-bg: #FFFFFF;          /* page background */
  --color-ink: #101215;         /* primary text, waterline upper strokes */
  --color-navy: #2A4B8D;        /* brand accent: links, eyebrow, button, waterline lower strokes */
  --color-navy-hover: #223E75;  /* button hover */
  --color-body: #5B6068;        /* body/secondary text */
  --color-muted: #9AA0A6;       /* mono labels, footer */
  --color-border: #E2E2E2;      /* hairline rules */

  /* Type */
  --font-display: 'Space Grotesk', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --weight-eyebrow: 500;
  --weight-h1: 500;
  --size-wordmark: 22px;
  --size-tag: 10px;
  --size-eyebrow: 13px;
  --size-h1: 66px;
  --size-h1-md: 52px;           /* <=810px */
  --size-h1-sm: 40px;           /* <=480px */
  --size-body: 15px;
  --size-btn: 13px;
  --size-footer: 9px;
  --leading-h1: 1.02;
  --leading-h1-sm: 1.06;
  --leading-body: 1.8;
  --tracking-tight: -0.045em;   /* wordmark + h1 */
  --tracking-tag: 0.24em;
  --tracking-footer: 0.12em;

  /* Layout */
  --space-gutter: 56px;
  --space-gutter-md: 40px;      /* <=810px */
  --space-gutter-sm: 24px;      /* <=480px */
  --space-bar: 20px;            /* nav/footer vertical padding */
  --space-hero-top: 84px;
  --space-hero-bottom: 64px;
  --space-hero-gap: 30px;
  --height-waterline: 160px;
  --height-waterline-sm: 100px; /* <=480px */
  --width-h1-max: 880px;
  --width-body-max: 560px;
  --radius-btn: 3px;
}