/* ============================================================
   STUNIO — SPACING, RADIUS, SHADOW, MOTION
   Base unit = 16 (gap) from global_vars.dart. Radii & shadows
   lifted from stunio_card.dart + the Flutter button/input themes.
   ============================================================ */

:root {
  /* ---- SPACING (4px base) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;   /* gap — the canonical unit */
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- RADIUS ---- */
  --radius-xs:   4px;    /* icon buttons */
  --radius-sm:   8px;    /* small chips, gap/2 buttons */
  --radius-md:   10px;   /* inputs, list cards */
  --radius-lg:   12px;   /* client buttons & inputs */
  --radius-xl:   14px;   /* standard card */
  --radius-2xl:  16px;   /* shadowed card */
  --radius-3xl:  20px;   /* large secondary buttons */
  --radius-4xl:  24px;   /* hero buttons, helper sheets */
  --radius-pill: 9999px; /* stadium / status pills */

  /* ---- BORDER WIDTHS ---- */
  --bw-hairline: 1px;
  --bw-input:    2px;
  --bw-card:     1.6px;
  --bw-button:   3px;    /* helper bordered/secondary buttons */

  /* ---- SHADOWS ---- */
  /* card elevation = two stacked 10%-black shadows (stunio_card.dart) */
  --shadow-card:    0 1px 1px -1px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.10);
  --shadow-raised:  0 1px 2px -1px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.10);
  --shadow-pop:     0 8px 24px rgba(0,48,135,0.12);
  --shadow-sheet:   0 -8px 32px rgba(0,48,135,0.14);
  --shadow-focus:   0 0 0 3px var(--focus-ring);

  /* ---- MOTION ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   320ms; /* @kind other */

  /* ---- LAYOUT ---- */
  --tap-target:  44px;   /* min touch target (helper app) */
  --sidebar-w:   260px;  /* client web sidebar */
  --container:   1200px;
}