/* FSCLN — Spacing, layout & radius tokens. 8px base. */
:root {
  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 192px;

  /* ---- Layout ---- */
  --content-max: 1200px;
  --gutter-mobile: 24px;
  --gutter-desktop: 96px;
  --section-gap: 96px;

  /* ---- Radius (minimal — sharp/subtle) ---- */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ---- Border widths ---- */
  --border-1: 1px;
  --border-2: 2px;

  /* ============ Fluid layout (v2) ============
   * Same rule as the type scale: clamp(floor, proportional to the viewport, cap at 2560px), the floor being
   * what the site has always used. --sp and --ui are lengths you multiply: `calc(96 * var(--sp))` is 96px
   * on a phone and 120px at 2000px. --sp is for spacing; --ui for controls and the measure of text blocks,
   * which grow with the type and so grow more. */
  --sp: clamp(1px, 0.0625vw, 1.6px);   /* x1.25 @2000 */
  --ui: clamp(1px, 0.075vw, 1.92px);   /* x1.5 @2000 */

  /* --wrap-max is the content column's max-width (it replaces the fixed 1180px): 1436px @2000 = 1356px of
   * content. --nav-h is the fixed nav's height, which the code bars match. --hl-h is the Uitgelicht field's
   * height; its tiles are sized in JS by the same factor (H.grow(1.3)), so the two stay equal. */
  --wrap-max: clamp(1180px, 71.8vw, 1838px);
  --nav-h: clamp(68px, 4.8vw, 123px);
  --hl-h: clamp(600px, 39vw, 998.4px);
}