/* GetZelling — Spacing, radius, elevation, motion tokens */
:root {
  /* 8px base unit */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  --content-max: 1180px;

  /* Radius scale — nothing else */
  --radius-none: 0px;      /* default, most elements */
  --radius-button: 4px;    /* buttons, nav items */
  --radius-card: 12px;     /* category cards only */
  --radius-dot: 50%;       /* dot indicators */

  /* Buttons: wide & low */
  --button-min-width: 200px;
  --button-height: 38px;
  --nav-button-min-height: 32px;

  /* Elevation — near-zero shadow */
  --elevation-0: none;                            /* default, no exceptions */
  --elevation-frost: var(--frost);                /* nav on scroll (backdrop, not shadow) */
  --elevation-scrim: var(--scrim);                /* modal overlay */
  --elevation-hint: 0 0 0 1px rgba(0, 0, 0, 0.05); /* rare hover hint only */

  /* Motion — color/background/border only. No scale, no translate. */
  --transition: 0.33s ease; /* @kind other */
  --transition-props: color, background-color, border-color, opacity; /* @kind other */
}