/* ============================================================
   Hazlnut — Spacing, radius, shadow & motion tokens
   The brand reads CRISP: square motif tiles, hairline ink rules,
   pill mono-buttons, and scalloped/plus-sign borders rather than
   soft drop shadows. Radii are modest; elevation is flat-ish and
   uses ink lines + offset blocks more than blur.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---------------------------- */
  --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 -------------------------------------- */
  --section-pad-y:  clamp(3.5rem, 2rem + 6vw, 7.5rem);
  --section-pad-x:  clamp(1.25rem, 0.5rem + 4vw, 6rem);
  --content-max:    1200px;
  --measure:        66ch;   /* readable line length */

  /* ---- Radius ---------------------------------------------- */
  --radius-xs:   2px;    /* tiles / chips  */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   24px;
  --radius-pill: 999px;  /* mono buttons / tags */

  /* ---- Borders --------------------------------------------- */
  --border-hair:  1px solid var(--line-ink);
  --border-ink:   2px solid var(--hzl-ink);
  --border-bold:  2.5px solid var(--hzl-black);

  /* ---- Elevation (used sparingly) -------------------------- */
  --shadow-sm:    0 1px 2px color-mix(in oklab, var(--hzl-maroon) 14%, transparent);
  --shadow-md:    0 6px 22px color-mix(in oklab, var(--hzl-maroon) 16%, transparent);
  /* signature "offset block" — a hard ink shadow, no blur */
  --shadow-block: 6px 6px 0 var(--hzl-ink);
  --shadow-block-coral: 6px 6px 0 var(--hzl-coral);

  /* ---- Motion ---------------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);      /* @kind other */
  --dur-fast:   140ms;  /* @kind other */
  --dur-med:    260ms;  /* @kind other */
  --dur-slow:   520ms;  /* @kind other */
}