/* ============================================================
   SPACING, RADII, SHADOW, GRID — Metabolic Intelligence
   ------------------------------------------------------------
   Calm is built from whitespace and rhythm, not ornament.
   An 8px base grid. Generous section padding. Soft, matte
   elevation — diffuse shadow, never a hard drop, never glow.
   ============================================================ */

:root {
  /* --- Spacing scale (8px base) -------------------------- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;
  --space-11:  160px;

  /* Semantic rhythm */
  --gutter:          var(--space-5);   /* between elements in a group */
  --block-gap:       var(--space-7);   /* between blocks in a section */
  --section-pad-y:   var(--space-10);  /* vertical breathing per section */
  --section-pad-x:   var(--space-8);   /* page side margins (desktop) */

  /* --- Radii (soft, never pill-everything) --------------- */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  16px;   /* default card */
  --radius-lg:  24px;   /* large panels, the proof object */
  --radius-xl:  32px;   /* hero containers */
  --radius-pill:999px;  /* CTA, mono tags */

  /* --- Borders ------------------------------------------- */
  --bw-hair: 1px;    /* @kind other */
  --bw-med:  1.5px;  /* @kind other */

  /* --- Elevation (matte, diffuse, warm-grey — zero gloss) -
     Shadows are soft and low-contrast; they suggest a sheet of
     paper lifted off a desk, not a glowing UI card. */
  --shadow-sm:  0 1px 2px rgba(27,26,23,0.04),
                0 1px 3px rgba(27,26,23,0.05);
  --shadow-md:  0 2px 6px rgba(27,26,23,0.05),
                0 8px 20px rgba(27,26,23,0.06);
  --shadow-lg:  0 4px 12px rgba(27,26,23,0.06),
                0 18px 48px rgba(27,26,23,0.08);
  /* For the deep instrument panel on light ground */
  --shadow-deep:0 8px 24px rgba(26,30,29,0.18),
                0 32px 64px rgba(26,30,29,0.16);

  /* --- Layout ------------------------------------------- */
  --content-max:  1200px;  /* primary content column */
  --reading-max:  680px;   /* long-form reading measure */
  --grid-cols:    12;      /* @kind other */

  /* --- Motion (calm, no bounce) -------------------------- */
  --ease-calm:   cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */
  --dur-fast:    140ms;    /* @kind other */
  --dur-base:    240ms;    /* @kind other */
  --dur-slow:    420ms;    /* @kind other */

  /* --- Glass (used sparingly: floating nav, overlays) ----
     Matte frosted, low blur, never shiny. */
  --glass-bg:    rgba(251,249,245,0.72);
  --glass-blur:  blur(16px) saturate(1.05);  /* @kind other */
  --glass-border:rgba(27,26,23,0.06);
}