/* ============================================================
   PeopleTalk Design System — Spacing, Radii, Shadows, Borders,
   Layout, Motion
   ============================================================ */

:root {
  /* --- Spacing scale (4px base) ---------------------------- */
  --space-0:  0;
  --space-1:  0.25rem; /* 4 */
  --space-2:  0.5rem;  /* 8 */
  --space-3:  0.75rem; /* 12 */
  --space-4:  1rem;    /* 16 */
  --space-5:  1.5rem;  /* 24 */
  --space-6:  2rem;    /* 32 */
  --space-7:  2.5rem;  /* 40 */
  --space-8:  3rem;    /* 48 */
  --space-9:  4rem;    /* 64 */
  --space-10: 5rem;    /* 80 */
  --space-11: 6.5rem;  /* 104 */
  --space-12: 8rem;    /* 128 */

  /* --- Radii ----------------------------------------------- */
  --radius-none: 0;
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);

  /* --- Borders --------------------------------------------- */
  --border-width-hair: 1px;
  --border-width:      1.5px;
  --border-width-bold: 2.5px;

  /* --- Shadows (soft, navy-tinted) ------------------------- */
  --shadow-xs:  0 1px 2px rgba(16, 29, 51, 0.07);
  --shadow-sm:  0 2px 6px rgba(16, 29, 51, 0.08);
  --shadow-md:  0 6px 18px rgba(16, 29, 51, 0.10);
  --shadow-lg:  0 16px 40px rgba(16, 29, 51, 0.13);
  --shadow-xl:  0 30px 70px rgba(16, 29, 51, 0.17);
  --shadow-focus: 0 0 0 3px rgba(26, 163, 219, 0.35);

  /* --- Layout ---------------------------------------------- */
  --container-narrow: 720px;
  --container-text:   880px;
  --container-wide:   1200px;
  --container-max:    1320px;
  --gutter:           clamp(1rem, 4vw, 3rem);
  --header-height:    88px;

  /* --- Motion ---------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   140ms;
  --duration-base:   220ms;
  --duration-slow:   420ms;

  /* --- Z-index --------------------------------------------- */
  --z-base:     1;
  --z-sticky:   100;
  --z-header:   200;
  --z-overlay:  900;
  --z-modal:    1000;
  --z-toast:    1100;
}