/* ── Spatial system ──────────────────────────────────────────────────────
   design.md's explicit 8px named ladder, verbatim. Aurelis adds nothing to it;
   the numbered aliases below exist only so components can be read at a glance. */

:root {
  --space-xxxs: 4px;
  --space-xxs: 8px;
  --space-xs: 16px;
  --space-sm: 24px;
  --space-md: 32px;
  --space-lg: 48px;
  --space-xl: 64px;
  --space-xxl: 96px;   /* major band padding */
  --space-super: 128px; /* hero band depth */

  --space-1: var(--space-xxxs);
  --space-2: var(--space-xxs);
  --space-3: 12px;
  --space-4: var(--space-xs);
  --space-5: var(--space-sm);
  --space-6: var(--space-md);
  --space-7: var(--space-lg);
  --space-8: var(--space-xl);
  --space-9: var(--space-xxl);
  --space-10: var(--space-super);
  --space-11: 160px;
  --space-12: 200px;

  /* Section rhythm — 96px standard band, 128px cinematic depth */
  --section-y: clamp(48px, 8vw, 96px); /* @kind spacing */
  --section-y-cinema: clamp(64px, 10vw, 128px); /* @kind spacing */

  /* Container & gutters — editorial body caps at 1280px, photography full-bleed */
  --container-max: 1280px; /* @kind spacing */
  --gutter: clamp(16px, 4vw, 64px); /* @kind spacing */
  --gutter-tight: clamp(16px, 3vw, 32px); /* @kind spacing */
  --measure: 62ch; /* @kind spacing */
  --measure-tight: 46ch; /* @kind spacing */

  --grid-columns: 12; /* @kind other */
  --grid-gap: clamp(16px, 2vw, 32px); /* @kind spacing */

  /* Chrome */
  --nav-height: 64px; /* @kind spacing */
  --nav-height-scrolled: 64px; /* @kind spacing */
  --control-height: 48px; /* @kind spacing */ /* CTA + input height, WCAG AAA target */

  /* Breakpoints (documentation values) */
  --bp-mobile: 640px; /* @kind other */
  --bp-tablet: 1024px; /* @kind other */
  --bp-desktop: 1280px; /* @kind other */
  --bp-wide: 1440px; /* @kind other */
}