/* ── Spacing, radius & layout ────────────────────────────────────────────
   Base unit 8px. Comfortable density. Flat & border-defined — no elevation
   tokens because the system deliberately ships no drop shadows.
   ──────────────────────────────────────────────────────────────────────── */

:root {
  /* Spacing scale (8px base) */
  --spacing-unit: 8px;
  --spacing-8:  8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;

  /* Border radius */
  --radius-lg:    9.6px; /* buttons, inputs, nav, toggles */
  --radius-2xl:   16px;  /* cards */
  --radius-3xl:   24px;  /* containers */
  --radius-panel: 32px;  /* hero panels */

  /* Named radii (semantic) */
  --radius-nav:        9.6px;
  --radius-cards:      16px;
  --radius-inputs:     9.6px;
  --radius-buttons:    9.6px;
  --radius-containers: 24px;
  --radius-hero-panels: 32px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap:    64px;
  --card-padding:   32px;
  --element-gap:    8px;

  /* Borders — hairline rules stand in for elevation */
  --border-width: 1px;

  /* Elevation: intentionally none. Depth = borders + surface contrast. */
  --shadow-none: none;
}