/* ============================================================
   SPACING, RADII, LAYOUT & MOTION tokens
   ============================================================ */
:root {
  /* — corner radii — */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* — layout — */
  --maxw: 1320px;
  --gutter: clamp(20px, 4vw, 56px); /* @kind spacing */

  /* — density (section + card padding) — */
  --pad-section: clamp(80px, 11vw, 160px);
  --pad-card: 28px;
  --pad-card-lg: 40px;

  /* — motion easing — */
  --ease: cubic-bezier(.2, .7, .2, 1); /* @kind other */
  --ease-out: cubic-bezier(.16, 1, .3, 1); /* @kind other */

  /* — elevation / glow shadows — */
  --shadow-card:  0 30px 60px -30px rgba(0,0,0,0.7);
  --shadow-panel: 0 50px 100px -50px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.06);
  --glow-accent:  0 14px 40px -16px var(--accent);
}

/* density variants (set [data-density] on :root) */
:root[data-density="compact"] { --pad-section: clamp(56px, 7vw, 96px);  --pad-card: 20px; --pad-card-lg: 28px; }
:root[data-density="comfy"]   { --pad-section: clamp(120px, 14vw, 200px); --pad-card: 36px; --pad-card-lg: 52px; }