/* =========================================================================
   variables.css — STRUCTURAL design tokens only (non-themed).
   Colour, surface, ink, border and accent tokens live in theme.css so they
   can flip light/dark from a single source. Anything here is the same in
   every theme: spacing, radius, type, easing, layout.
   ========================================================================= */
:root {
  /* spacing base 4/8 */
  --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;

  /* radius (cards top out at 16) */
  --radius-sm:8px; --radius-md:14px; --radius-lg:16px; --radius-pill:999px;
  --home-radius: var(--radius-md);

  /* type */
  --font-display: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --reading-width: 68ch;

  /* easing (house curves) */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-fast:160ms; --t-base:320ms; --t-slow:600ms;

  /* layout */
  --nav-h: 88px;
  --container: 1280px;                  /* the one shared content column   */
  --gutter: clamp(20px, 5vw, 64px);     /* the one shared page gutter       */
}