/* ============================================================
   myMedCrew · Spacing, Grid, Radius, Elevation
   4px base scale. 12-column grid, 24px gutter. Structure
   signals reliability — white space is a feature, not a gap.
   ============================================================ */

:root {
  /* ---- Spacing scale · 4px base -------------------------- */
  --space-1:  4px;   /* hairline */
  --space-2:  8px;   /* tight */
  --space-3:  12px;
  --space-4:  16px;  /* base */
  --space-6:  24px;  /* group */
  --space-8:  32px;
  --space-10: 40px;  /* section */
  --space-16: 64px;  /* major */
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Layout / grid ------------------------------------- */
  --grid-columns: 12; /* @kind other */
  --grid-gutter:  24px;
  --container-max: 1200px;
  --container-pad: clamp(20px, 5vw, 64px);

  /* ---- Corner radii -------------------------------------- */
  --radius-sm:   6px;
  --radius:      8px;   /* buttons, inputs — the brand default */
  --radius-lg:   12px;  /* cards */
  --radius-xl:   18px;  /* tiles / app icon at 150px (12% of width) */
  --radius-pill: 999px; /* badges, status pills */

  /* ---- Border weights ------------------------------------ */
  --border-width:      1.5px; /* default brand border */
  --border-width-hair: 1px;

  /* ---- Elevation · navy-tinted, soft, restrained --------- */
  --shadow-xs: 0 1px 2px rgba(var(--shadow-color) / 0.06);
  --shadow-sm: 0 1px 3px rgba(var(--shadow-color) / 0.08), 0 1px 2px rgba(var(--shadow-color) / 0.04);
  --shadow-md: 0 4px 12px rgba(var(--shadow-color) / 0.10), 0 2px 4px rgba(var(--shadow-color) / 0.05);
  --shadow-lg: 0 12px 32px rgba(var(--shadow-color) / 0.12), 0 4px 8px rgba(var(--shadow-color) / 0.06);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* ---- Motion · calm, no bounce -------------------------- */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur:      180ms; /* @kind other */
  --dur-slow: 260ms; /* @kind other */

  /* ---- Hit target ---------------------------------------- */
  --hit-min: 44px;
}