:root {
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;    /* the default: inputs, buttons, tiles */
  --radius-lg: 12px;   /* cards, chart panels, modals */
  --radius-xl: 16px;   /* statements cards */
  --radius-pill: 20px;
  --radius-round: 100px; /* marketing pill buttons */
  --radius-full: 999px;
  --radius-circle: 50%;

  /* Elevation is deliberately almost absent. Borders do the work. */
  --shadow-none: none;
  --shadow-hairline: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-pill: 0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-card-hover: 0 2px 8px rgba(15, 23, 42, 0.04);
  --shadow-lift: 0 4px 12px rgba(37, 99, 235, 0.1);
  --shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.3);
  --shadow-logo: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));

  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.12);
  --focus-ring-legacy: 0 0 0 3px rgba(59, 130, 246, 0.1);
}