/* ============================================================
   9/11 Legacy Foundation — Spacing & Layout Tokens
   8pt grid system (4px increments allowed for tight components).
   ============================================================ */

:root {
  /* ---- 8pt spacing scale ---- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;   /* related-element spacing */
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;   /* major-element spacing */
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-30:  120px;  /* supporting section spacing */
  --space-50:  200px;  /* large/hero section spacing */

  /* ---- Layout ---- */
  --container-max: 1200px;   /* centered content max width */
  --container-pad: 40px;     /* full-width internal padding */
  --container-pad-mobile: 20px;

  /* ---- Radii (restrained, classic) ---- */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ---- Border widths ---- */
  --border-hairline: 1px;  /* @kind spacing */
  --border-thick:    2px;  /* @kind spacing */
  --border-rule:     3px;  /* @kind spacing */

  /* ---- Z-index ---- */
  --z-base:    0;     /* @kind other */
  --z-raised:  10;    /* @kind other */
  --z-sticky:  100;   /* @kind other */
  --z-overlay: 1000;  /* @kind other */
  --z-modal:   1100;  /* @kind other */
  --z-toast:   1200;  /* @kind other */
}