/* ============================================================
   SHAPE & ELEVATION TOKENS
   Border-radius is hierarchical. Elevation is color-block first,
   shadow second — shadows are minimal.
   ============================================================ */

:root {
  /* --- Border radius --- */
  --radius-xs: 2px;      /* cookie-consent / legal CTA buttons */
  --radius-sm: 6px;      /* text inputs, small inline buttons */
  --radius-md: 10px;     /* content cards, article cards, cream callouts */
  --radius-lg: 12px;     /* primary CTA, signature cards, tabbed feature cards */
  --radius-pill: 9999px; /* pricing-page CTA buttons (sub-system only) */
  --radius-full: 9999px; /* circular icon buttons, avatars */

  /* --- Borders --- */
  --border-hairline: 1px solid var(--color-hairline);
  --border-strong: 1px solid var(--color-border-strong);

  /* --- Elevation --- */
  --elevation-flat: none;
  /* Primary CTA rest: soft drop with faint blue-tinted glow (holdover from link color) */
  --elevation-button-rest: 0 1px 2px rgba(24, 29, 38, 0.16),
    0 0 0 1px rgba(27, 97, 201, 0.04);
  /* Keyboard focus on primary buttons: outer 2px blue ring */
  --elevation-button-focus: 0 0 0 2px var(--color-focus-ring);
}