/* tokens-radius-shadow-motion-v1 — W-56-3 — Saadjie border-radius tokens. */
/*
 * Planning: .archon/queued-builds/WAVE-56-design-tokens.md
 *
 * WHY radii live in their own file: changing the "feel" of the surface
 * (sharper / softer) is a single-file edit. Authors never write raw px
 * radii — every component uses var(--radius-*).
 *
 * GOTCHA: --radius-pill is 999px (not 50%) on purpose. 50% only produces
 * a true circle if width === height; on a wider button it draws an
 * ellipse. 999px clamps to the half-height for any rect, which is the
 * shape we actually want for pill buttons and chips.
 *
 * CONSTRAINT: never apply --radius-lg or larger to elements smaller
 * than 32px square — the corner radius would dominate the shape and
 * collapse the visual hierarchy. Use --radius-sm / --radius-md instead.
 */

:root {
  /* ---------- Border-radius scale ----------
     WHY four sizes (not infinite): every Saadjie surface fits into one
     of four shape buckets — hairline inputs (sm), cards/buttons (md),
     hero blocks/sheets (lg), pills (full). A fifth step would be noise. */
  --radius-none:    0;
  --radius-sm:      4px;       /* inputs, tags, small badges */
  --radius-md:      8px;       /* cards, buttons, list rows */
  --radius-lg:      16px;      /* hero blocks, modal sheets */
  --radius-xl:      24px;      /* marketing-style feature blocks */
  --radius-pill:    999px;     /* pill buttons + chip cluster */
  --radius-circle:  50%;       /* avatar / icon-only round buttons */
}