/* MissionPath Portfolios — Spacing, radius, shadow, layout tokens
   8px base rhythm. Calm, generous spacing; restrained radii; soft warm-tinted shadows
   (never pure black — shadows pick up the warm ink so they sit naturally on paper). */

:root {
  /* ---- Spacing scale (8px base) ---- */
  --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;
  --space-32:  128px;

  /* ---- Radii (restrained, slightly soft) ---- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;   /* default card / input */
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* ---- Shadows (warm-tinted, low spread) ---- */
  --shadow-xs:  0 1px 2px rgba(28, 26, 23, 0.06);
  --shadow-sm:  0 1px 3px rgba(28, 26, 23, 0.08), 0 1px 2px rgba(28, 26, 23, 0.05);
  --shadow-md:  0 4px 12px rgba(28, 26, 23, 0.08), 0 2px 4px rgba(28, 26, 23, 0.05);
  --shadow-lg:  0 12px 28px rgba(28, 26, 23, 0.10), 0 4px 10px rgba(28, 26, 23, 0.06);
  --shadow-xl:  0 24px 56px rgba(28, 26, 23, 0.14), 0 8px 20px rgba(28, 26, 23, 0.08);
  --shadow-focus: 0 0 0 3px var(--focus-ring);
  /* Inset hairline used on raised surfaces to crisp the top edge on paper */
  --shadow-card: 0 1px 2px rgba(28,26,23,0.05), 0 6px 20px rgba(28,26,23,0.07);

  /* ---- Layout ---- */
  --container-sm:  640px;
  --container-md:  840px;
  --container-lg:  1080px;
  --container-xl:  1240px;
  --gutter:        24px;
  --header-height: 68px;

  /* ---- Motion ---- */
  --ease-out:     cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */
  --ease-in-out:  cubic-bezier(0.45, 0, 0.2, 1);       /* @kind other */
  --dur-fast:     120ms;  /* @kind other */
  --dur-base:     200ms;  /* @kind other */
  --dur-slow:     320ms;  /* @kind other */
}