/* ============================================================
   Page & Parley — Spacing, Radii, Shadow, Motion
   ------------------------------------------------------------
   A 4px base grid. Radii are gently rounded — bookish and soft
   without feeling like a consumer toy. Shadows are warm-tinted,
   low, and diffuse: paper resting on paper, never floating UI.
   ============================================================ */

:root {
  /* ---- Spacing (4px base grid) ---- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---- Layout widths ---- */
  --container:        1120px;  /* marketing / dashboard max */
  --container-narrow: 760px;   /* article / forms */
  --container-reading:600px;   /* manuscript measure wrapper */
  --sidebar:          236px;

  /* ---- Radii ---- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;   /* default control / card radius */
  --radius-lg:   16px;   /* feature cards, panels */
  --radius-xl:   22px;   /* hero / modal */
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-width: 1px;

  /* ---- Shadows (warm slate tint, low & diffuse) ---- */
  --shadow-xs:  0 1px 2px rgba(42, 38, 64, .06);
  --shadow-sm:  0 1px 3px rgba(42, 38, 64, .08), 0 1px 2px rgba(42, 38, 64, .05);
  --shadow-md:  0 4px 14px rgba(42, 38, 64, .09), 0 2px 4px rgba(42, 38, 64, .05);
  --shadow-lg:  0 12px 32px rgba(42, 38, 64, .13), 0 4px 8px rgba(42, 38, 64, .06);
  --shadow-xl:  0 24px 60px rgba(33, 31, 56, .26);
  /* focus halo */
  --shadow-focus: 0 0 0 3px rgba(180, 106, 74, .32);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(.22, .61, .36, 1); /* @kind other */
  --ease-in-out:cubic-bezier(.45, 0, .25, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   180ms; /* @kind other */
  --dur-slow:   280ms; /* @kind other */
  --transition: var(--dur-base) var(--ease-out); /* @kind other */

  /* ---- Z-index ---- */
  --z-nav:     500; /* @kind other */
  --z-dropdown:600; /* @kind other */
  --z-overlay: 1000; /* @kind other */
  --z-modal:   1010; /* @kind other */
  --z-toast:   1100; /* @kind other */
}