/*
 * tokens.css — the menu's design tokens (U11, layout audit 2026-10-10, owner-chosen).
 *
 * One scale for every page (menu, profile, invite, sign-in, admin). Mapped from the values the
 * site already used, so the change is within ±2px except the owner-approved movers:
 *   - spacing 44 → 48, 60 → 64, 72 → 80, 90 → 96;
 *   - profile name (display "page" role, +6–8px) and the outro (display "name" role, −3px).
 * Half-steps (--sp-2-5 = 10px, --sp-3-5 = 14px) keep the 107 existing 10/14px values exact.
 *
 * Breakpoints cannot be custom properties inside @media; the reference set is documented here:
 *   480 / 768 / 1024 / 1280 (+ a ≤399 guard). Existing queries were left as they are.
 */
:root {
  /* Spacing — 4px base */
  --sp-0-5: 2px;
  --sp-1: 4px;
  --sp-1-5: 6px;
  --sp-2: 8px;
  --sp-2-5: 10px;
  --sp-3: 12px;
  --sp-3-5: 14px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* UI type (Poppins) */
  --fs-label: 11px;   /* uppercase, tracked labels only */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 26px;
  --fs-stat: 36px;

  /* Display type (Cormorant Garamond), by role */
  --fd-hero: clamp(48px, 11vw, 156px);
  --fd-sheet: clamp(30px, 5vw, 54px);
  --fd-page: clamp(34px, 8vw, 46px);
  --fd-price: clamp(26px, 3.4vw, 36px);
  --fd-name: clamp(20px, 2.6vw, 27px);
  --fd-section: 24px;

  /* Radius */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* Icons and touch */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --hit: 44px;

  /* Layout */
  --gutter: clamp(14px, 4vw, 40px);
  --sidebar-w: 240px;
  --hairline: 1px;
}