/* ============================================================
   Kate's Quest — Spacing & Layout
   ------------------------------------------------------------
   A 4px base grid. Quest cards are physical objects, so spacing
   tends toward generous interior margins (the "deckle" of the card)
   and tight clusters for detail rows.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4  */
  --space-2:  0.5rem;    /* 8  */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  2.5rem;    /* 40 */
  --space-8:  3rem;      /* 48 */
  --space-9:  4rem;      /* 64 */
  --space-10: 5rem;      /* 80 */
  --space-12: 6rem;      /* 96 */

  /* ---- Semantic spacing ---- */
  --gap-tight:   var(--space-2);   /* icon ↔ label */
  --gap-cluster: var(--space-3);   /* within a detail row group */
  --gap-default: var(--space-5);   /* between blocks */
  --gap-section: var(--space-8);   /* between major sections */

  --pad-card:    var(--space-6);   /* interior margin of a quest card */
  --pad-panel:   var(--space-5);   /* inset detail panel */
  --pad-control: var(--space-3);   /* buttons / inputs */

  /* ---- Card geometry ---- */
  --card-width:   360px;   /* a single quest card */
  --card-aspect:  1 / 1; /* @kind other */ /* square source cards */
  --card-bleed:   12px;    /* ornate-frame inset from the card edge */

  /* ---- Container widths ---- */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1320px;

  /* ---- Z-index ladder ---- */
  --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 */
}