/* ============================================================
   PIAF ALIGNMENT STUDIO — SPACING, RADII, SHADOW, MOTION
   Calm, airy, grounded. Generous whitespace; soft elevation;
   slow, unhurried easing. No bounce.
   ============================================================ */

:root {
  /* --- Spacing scale (4px base, breathes wide) ------------ */
  --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:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 — section rhythm */

  /* --- Radii (soft, never pill-everything) ---------------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;   /* default card / input */
  --radius-lg:   22px;   /* large cards, sheets */
  --radius-xl:   32px;
  --radius-full: 999px;  /* chips, avatars, icon buttons */

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

  /* --- Motion — slow, sanctuary-calm, no overshoot -------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-inout: cubic-bezier(0.45, 0, 0.2, 1);     /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   240ms; /* @kind other */
  --dur-slow:   440ms; /* @kind other */

  /* --- Layout maxima -------------------------------------- */
  --container:   1200px;
  --measure:     66ch;  /* readable text column */
}

/* --- Elevation — warm, low, diffuse (espresso-tinted) ---
   --elev-* carries the values; --shadow-* aliases them. Tailwind's shadow-*
   utilities inline whatever literal they are registered with (it parses the
   value to inject --tw-shadow-color), so registering a literal would bake the
   light shadow into the utility. tailwind.theme.css instead registers
   --shadow-*: var(--elev-*), keeping a var() at the use-site so a themed
   subtree re-resolves it.

   Scoped :root + [data-theme="light"] (like colors.css) so a light subtree
   nested in a dark page resets the elevation too. The --shadow-* aliases are
   re-declared in each theme block on purpose: a custom property's var() is
   substituted at computed-value time on the element that declares it, so
   declaring the alias only at :root would freeze it to the light value and
   descendants would inherit that. */
:root,
[data-theme="light"] {
  --elev-xs: 0 1px 2px rgba(57, 41, 39, 0.05);
  --elev-sm: 0 2px 8px rgba(57, 41, 39, 0.06);
  --elev-md: 0 8px 24px rgba(57, 41, 39, 0.08);
  --elev-lg: 0 18px 48px rgba(57, 41, 39, 0.12);
  --shadow-xs: var(--elev-xs);
  --shadow-sm: var(--elev-sm);
  --shadow-md: var(--elev-md);
  --shadow-lg: var(--elev-lg);
  --shadow-inset: inset 0 1px 2px rgba(57, 41, 39, 0.06);
}

[data-theme="dark"] {
  /* Shadows read as glow-less depth on near-black brown */
  --elev-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
  --elev-sm: 0 2px 8px rgba(0, 0, 0, 0.36);
  --elev-md: 0 8px 24px rgba(0, 0, 0, 0.44);
  --elev-lg: 0 18px 48px rgba(0, 0, 0, 0.55);
  --shadow-xs: var(--elev-xs);
  --shadow-sm: var(--elev-sm);
  --shadow-md: var(--elev-md);
  --shadow-lg: var(--elev-lg);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; /* @kind other */ --dur-base: 0ms; /* @kind other */ --dur-slow: 0ms; /* @kind other */ }
}