/* ============================================================
   SWORN — Spacing & Layout Tokens
   Strict 8-point rhythm (with 2/4px half-steps for dense UI).
   Generous whitespace, editorial composition.
   ============================================================ */

:root {
  /* ---- Base spacing scale (8pt, half-steps below 8) ---- */
  --space-0:   0;
  --space-px:  1px;
  --space-0-5: 0.125rem; /* 2px  */
  --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:   2.5rem;   /* 40px */
  --space-8:   3rem;     /* 48px */
  --space-9:   4rem;     /* 64px */
  --space-10:  5rem;     /* 80px */
  --space-11:  6rem;     /* 96px */
  --space-12:  8rem;     /* 128px */

  /* ---- Semantic spacing roles ---- */
  --gap-inline:     var(--space-2);  /* between inline siblings   */
  --gap-control:    var(--space-3);  /* label↔control, form gaps  */
  --gap-component:  var(--space-5);  /* between components        */
  --gap-section:    var(--space-9);  /* between page sections     */
  --pad-card:       var(--space-5);  /* default card padding      */
  --pad-card-lg:    var(--space-6);
  --pad-control-x:  var(--space-4);  /* button/input horizontal   */
  --pad-control-y:  var(--space-2);

  /* ---- Containers ---- */
  --container-sm:   40rem;   /* 640px  — prose / forms            */
  --container-md:   48rem;   /* 768px                             */
  --container-lg:   64rem;   /* 1024px — app content              */
  --container-xl:   80rem;   /* 1280px — marketing                */
  --container-2xl:  90rem;   /* 1440px — wide dashboards          */
  --gutter:         var(--space-5);  /* container side padding    */
  --gutter-lg:      var(--space-8);

  /* ---- Grid ---- */
  --grid-columns:   12;   /* @kind other */
  --grid-gutter:    var(--space-5);

  /* ---- Breakpoints (reference; use in media queries) ---- */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1440px;
}

/* ---- Container helpers ---- */
.container    { width: 100%; margin-inline: auto; padding-inline: var(--gutter); max-width: var(--container-xl); }
.container-lg { max-width: var(--container-lg); }
.container-md { max-width: var(--container-md); }
.container-sm { max-width: var(--container-sm); }

@media (min-width: 1024px) {
  .container { padding-inline: var(--gutter-lg); }
}