/* ============================================================
   UpStart — Shape & Elevation Tokens
   Depth via surface ladder + 1px hairlines. Resist drop shadows.
   ============================================================ */

:root {
  /* --- Border radius scale --- */
  --radius-xs:   4px;     /* chips, status badges, changelog rows */
  --radius-sm:   6px;     /* inline tags */
  --radius-md:   8px;     /* ALL buttons + form inputs */
  --radius-lg:   12px;    /* feature/pricing/testimonial cards */
  --radius-xl:   16px;    /* product screenshot panels */
  --radius-xxl:  24px;    /* oversized CTA banners (rare) */
  --radius-pill: 9999px;  /* tab toggles, status pills */
  --radius-full: 9999px;  /* avatar circles */

  /* --- Elevation: surface + hairline pairs (no shadow) --- */
  --elev-0-bg: transparent;
  --elev-1-bg: var(--color-surface-1);  --elev-1-border: 1px solid var(--color-hairline);
  --elev-2-bg: var(--color-surface-2);  --elev-2-border: 1px solid var(--color-hairline-strong);
  --elev-3-bg: var(--color-surface-3);  --elev-3-border: 1px solid var(--color-hairline);

  /* Focus ring — 2px primary-focus at 50% */
  --shadow-focus: 0 0 0 2px rgba(94, 105, 209, 0.5);

  /* The one sanctioned soft shadow — used sparingly under floating menus/dialogs */
  --shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.6);
}