/* ============================================================
   kizikula · spacing, radius, shadow, motion, layout
   ------------------------------------------------------------
   The architecture is stone and concrete: square-shouldered,
   matte, generous with air. Radii stay small (nothing pill-soft
   except deliberate tags). Shadows are warm and faint — light
   falls softly here. Motion is unhurried.
   ============================================================ */
:root {
  /* ---- Spacing (4px base) ---- */
  --s-1:  0.25rem;  /*  4 */
  --s-2:  0.5rem;   /*  8 */
  --s-3:  0.75rem;  /* 12 */
  --s-4:  1rem;     /* 16 */
  --s-5:  1.5rem;   /* 24 */
  --s-6:  2rem;     /* 32 */
  --s-7:  3rem;     /* 48 */
  --s-8:  4rem;     /* 64 */
  --s-9:  6rem;     /* 96 */
  --s-10: 8rem;     /*128 */

  /* ---- Radius (architectural, near-square) ---- */
  --r-none: 0; /* @kind radius */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-pill: 999px;  /* tags & toggles only */

  /* ---- Hairline weights ---- */
  --bw:      1px; /* @kind other */
  --bw-thick:1.5px; /* @kind other */

  /* ---- Shadows (warm, low, matte) ---- */
  --shadow-xs: 0 1px 2px rgba(30, 22, 14, 0.06);
  --shadow-sm: 0 2px 6px rgba(30, 22, 14, 0.08);
  --shadow-md: 0 8px 24px rgba(30, 22, 14, 0.10);
  --shadow-lg: 0 20px 50px rgba(30, 22, 14, 0.16);
  --shadow-inset: inset 0 1px 0 rgba(255, 252, 245, 0.5);

  /* ---- Motion (unhurried, no bounce) ---- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-1:     120ms; /* @kind other */
  --dur-2:     220ms; /* @kind other */
  --dur-3:     420ms; /* @kind other */

  /* ---- Layout ---- */
  --measure:    66ch; /* @kind other */
  --container:  1200px; /* @kind other */
  --container-narrow: 880px; /* @kind other */
  --gutter:     var(--s-5); /* @kind spacing */
  --focus-ring: 0 0 0 3px var(--sea-tint), 0 0 0 1.5px var(--sea); /* @kind other */
}