/* tokens-space-type-v1 — W-56-2 — Saadjie spacing + layout token layer. */
/*
 * Planning: .archon/queued-builds/WAVE-56-design-tokens.md
 *
 * WHY a 4-pt grid: matches Material's default rhythm and meshes with the
 * 44px touch target (11 × 4). Authors compose layouts from this scale
 * instead of typing px values. Anything that doesn't fall on a 4px
 * boundary will look "off" against the rest of the surface — that is
 * the constraint, not a guideline.
 *
 * WHY rem-based (not px): one rem === 16px by default (the reset pins
 * html { font-size: 100% }); using rem lets users scale the whole
 * surface up via browser zoom / system font-size without breaking
 * proportions. Spacing-1 (4px) stays as 0.25rem so a 200% browser
 * zoom yields 8px gaps, not a frozen 4px.
 *
 * GOTCHA: spacing tokens are *unitless or rem-only*. Never write
 * `var(--space-3) px` — the variable already carries its unit. The
 * one exception is --touch-target-min, which is px because iOS Safari
 * treats sub-44px tap targets as accessibility failures regardless of
 * zoom level.
 *
 * CONSTRAINT: every interactive element must satisfy --touch-target-min
 * (44px / 2.75rem) on mobile. Component CSS uses min-height for this,
 * not padding, so the rule travels with refactors.
 */

:root {
  /* ---------- 4-pt spacing scale ----------
     WHY scale extends to 12 (96px): Saadjie dashboards have hero blocks
     that need >64px breathing room on tablet+. Stopping at space-8 (64px)
     would force component CSS to do its own math; exposing 10/12 in the
     token layer keeps every author on the grid. */
  --space-0:   0;
  --space-px:  1px;          /* hairline divider — borders only */
  --space-1:   0.25rem;      /*   4px */
  --space-2:   0.5rem;       /*   8px */
  --space-3:   0.75rem;      /*  12px */
  --space-4:   1rem;         /*  16px */
  --space-5:   1.5rem;       /*  24px */
  --space-6:   2rem;         /*  32px */
  --space-7:   3rem;         /*  48px */
  --space-8:   4rem;         /*  64px */
  --space-9:   5rem;         /*  80px */
  --space-10:  6rem;         /*  96px */
  --space-12:  8rem;         /* 128px — page-level hero blocks only */

  /* ---------- Layout / container widths ----------
     WHY in ch (not px): a reading column is most comfortable at 60-75
     characters wide regardless of font-size choice. ch units adjust with
     the body font without the author re-measuring. */
  --container-max:           72ch;     /* ~720px — public reading column */
  --container-max-wide:      90ch;     /* admin queues + dashboard tables */
  --container-max-narrow:    52ch;     /* auth forms, single-column flows */
  --content-padding-x:       var(--space-4);
  --content-padding-y:       var(--space-5);

  /* ---------- Touch + a11y minima ----------
     CONSTRAINT: 44px is the Apple HIG floor / 48dp Material floor. Pinned
     here in px so a 100% zoom still satisfies it. Components express the
     rule as `min-height: var(--touch-target-min)` rather than padding
     hacks so the rule survives refactors. */
  --touch-target-min:        44px;
  --touch-target-comfortable: 48px;
  --focus-ring-width:        2px;
  --focus-ring-offset:       2px;

  /* ---------- Z-index ladder ----------
     WHY explicit tiers (not 999/9999): keeps layering predictable when
     a future overlay needs to sit above the modal scrim. Increments are
     wide enough that ad-hoc +1 nudges in component CSS won't collide. */
  --z-base:                  1;
  --z-raised:                10;
  --z-sticky:                50;
  --z-overlay:               100;
  --z-popover:               500;
  --z-modal:                 1000;
  --z-toast:                 1500;
  --z-tooltip:               2000;
}