/* ============================================================
   JUICE — Spacing, radius, elevation, motion, layout tokens
   ============================================================ */
:root {
  /* ---- Spacing scale ---- */
  --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;

  /* ---- Layout ---- */
  --shell-max: 1280px;
  --shell-pad: clamp(20px, 4vw, 48px);
  --section-pad: clamp(64px, 9vw, 110px);
  --gap-card: 14px;     /* tight grid gaps */
  --gap-macro: 40px;    /* macro section gaps */
  --nav-h: 72px;

  /* ---- Radius scale (6 / 12 / 20 / pill) — no friendly radii beyond this ---- */
  --r-sm: 6px;     /* buttons, inputs, chips-square */
  --r-md: 12px;    /* cards, panels */
  --r-lg: 20px;    /* large feature cards */
  --r-pill: 999px; /* chips, filters, tags */

  /* ---- Borders ---- */
  --bw: 1px;  /* @kind spacing */

  /* ---- Elevation (mostly borders; shadow reserved for floating cards) ---- */
  --shadow-card:    0 20px 60px rgba(0,0,0,0.55);
  --glow-yellow:    0 10px 44px rgba(255,255,0,0.25);
  --glow-yellow-hi: 0 16px 56px rgba(255,255,0,0.40);
  --glow-pink:      0 14px 44px rgba(250,45,146,0.40);
  --focus-ring:     0 0 0 3px rgba(255,255,0,0.12);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);     /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  --dur-fast: 0.14s;   /* @kind other */
  --dur: 0.22s;        /* @kind other */
  --dur-slow: 0.4s;    /* @kind other */
  --lift: -2px;        /* @kind other */
  --press: 1px;        /* @kind other */
  --card-lift: -4px;   /* @kind other */
  --marquee-dur: 26s;  /* @kind other */
}