/* ============================================================
   Hilo — Spacing, radius, elevation · FILAMENT identity
   Built on a strict 4px grid (a change from the old ad-hoc
   values) — the regularity is part of the premium, considered
   feel. Radii are crisp; elevation is soft and low. Borders do
   most of the separating work.
   ============================================================ */

:root {
  /* ---- 4px spacing grid ---- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- radii (crisp) · xs=inline code · sm=chips · md=buttons/inputs · lg=cards · xl=modals ---- */
  --r-xs: 4px;     /* @kind radius */
  --r-sm: 6px;     /* @kind radius */
  --r-md: 8px;     /* @kind radius */
  --r-lg: 12px;    /* @kind radius */
  --r-xl: 16px;    /* @kind radius */
  --r-pill: 999px; /* @kind radius */

  /* ---- key layout dimensions ---- */
  --rail-w: 260px;                   /* @kind spacing */
  --content-max: 1080px;             /* @kind spacing */
  --reading-max: 72ch;               /* @kind other */
  --studio-w: clamp(460px, 42vw, 900px); /* @kind other */

  /* ---- elevation (soft, low — premium restraint) ---- */
  --shadow-xs: 0 1px 2px rgba(16,17,20,.05);
  --shadow-sm: 0 1px 2px rgba(16,17,20,.05), 0 2px 6px rgba(16,17,20,.05);
  --shadow-md: 0 4px 16px rgba(16,17,20,.08);
  --shadow-lg: 0 12px 40px rgba(16,17,20,.12);
  --shadow-modal: 0 24px 70px rgba(8,9,12,.28);

  /* ---- motion · dur-1 hover/color · dur-2 panels · dur-3 larger ---- */
  --ease:     cubic-bezier(.2,.6,.3,1);   /* @kind other */
  --ease-out: cubic-bezier(.16,1,.3,1);   /* @kind other */
  --dur-1: .12s;  /* @kind other */
  --dur-2: .18s;  /* @kind other */
  --dur-3: .28s;  /* @kind other */
}