/* ============================================================
   Regably — Spacing, Radii, Shadows, Motion
   Calm and professional: small radii, low-spread shadows,
   quick confident easing. No bounce, no glow.
   ============================================================ */

: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.25rem; /* 20 */
  --space-6:  1.5rem;  /* 24 */
  --space-8:  2rem;    /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-20: 5rem;    /* 80 */
  --space-24: 6rem;    /* 96 */

  /* --- Radii (small scale — calm, not bubbly) --- */
  --radius-sm: 4px;  /* badges, tags, inputs-in-table */
  --radius-md: 6px;  /* buttons, inputs, default */
  --radius-lg: 10px; /* cards, panels */
  --radius-xl: 14px; /* modals, marketing surfaces */
  --radius-full: 999px; /* avatars, pills, switches */

  /* --- Shadows (low-spread, slate-tinted; trust > drama) --- */
  --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 8px -2px rgba(15, 23, 42, 0.10), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 12px 20px -4px rgba(15, 23, 42, 0.12), 0 4px 8px -4px rgba(15, 23, 42, 0.08);
  --shadow-xl: 0 24px 40px -8px rgba(15, 23, 42, 0.16), 0 8px 16px -8px rgba(15, 23, 42, 0.10);

  /* focus ring — brand, 3px soft halo + 1px crisp edge */
  --ring-brand: 0 0 0 3px rgba(37, 99, 235, 0.30);
  --ring-error: 0 0 0 3px rgba(220, 38, 38, 0.25);

  /* --- Motion --- */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1); /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0.0, 1, 1); /* @kind other */
  --duration-fast:   120ms; /* @kind other */
  --duration-normal: 180ms; /* @kind other */
  --duration-slow:   260ms; /* @kind other */

  /* --- Layout --- */
  --container-max: 1200px;
  --container-prose: 680px;
}

.dark {
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.40);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.50), 0 1px 2px -1px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 12px 20px -4px rgba(0, 0, 0, 0.60), 0 4px 8px -4px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 24px 40px -8px rgba(0, 0, 0, 0.65), 0 8px 16px -8px rgba(0, 0, 0, 0.50);
  --ring-brand: 0 0 0 3px rgba(59, 130, 246, 0.40);
}