/* ==========================================================================
   Kaleidoscope Systems — Spacing, radii, shadows, layout
   --------------------------------------------------------------------------
   4px base grid. Layouts are deliberately spacious. Radii are gently rounded
   (friendly, not bubbly). Shadows are soft, low, and warm-tinted — used
   sparingly; most separation comes from whitespace and hairline borders.
   ========================================================================== */

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

  /* --- Corner radii ------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;   /* default control radius */
  --radius-lg:   16px;   /* cards */
  --radius-xl:   24px;   /* feature panels */
  --radius-pill: 999px;

  /* --- Border widths ------------------------------------------------------ */
  --border-hairline: 1px;
  --border-thick:    1.5px;

  /* --- Shadows (soft, warm-tinted) ---------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(33, 30, 26, 0.06);
  --shadow-sm: 0 1px 3px rgba(33, 30, 26, 0.07), 0 1px 2px rgba(33, 30, 26, 0.05);
  --shadow-md: 0 4px 12px rgba(33, 30, 26, 0.07), 0 1px 3px rgba(33, 30, 26, 0.06);
  --shadow-lg: 0 12px 28px rgba(33, 30, 26, 0.10), 0 4px 8px rgba(33, 30, 26, 0.05);
  --shadow-focus-well: inset 0 0 0 1px var(--paper-300);

  /* --- Layout ------------------------------------------------------------- */
  --container-prose: 68ch;    /* comfortable reading measure */
  --container-narrow: 720px;
  --container-content: 1080px;
  --container-wide: 1280px;

  /* --- Motion (calm, minimal — ease, never bounce) ------------------------ */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --ease-in-out: cubic-bezier(0.45, 0, 0.4, 1);    /* @kind other */
  --duration-fast: 120ms;                          /* @kind other */
  --duration-base: 200ms;                          /* @kind other */
  --duration-slow: 320ms;                          /* @kind other */
}