:root {
  /* ---- Corner radius — small and utilitarian, never pill-shaped except
     true toggles/status pills/avatars. ---- */
  --radius-none: 0px;
  --radius-sm: 2px;   /* inputs, buttons, table row hover */
  --radius-md: 4px;   /* cards, menus, dialogs */
  --radius-lg: 8px;   /* large panels, modals */
  --radius-pill: 999px; /* switches, status pills only */

  /* ---- Elevation — Fluent's shadow ramp: two-part (ambient + key), very
     low opacity. Admin-center chrome is mostly flat; shadow only appears on
     things that float above the canvas (menus, dialogs, callouts). ---- */
  --shadow-2:  0 0 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14);
  --shadow-4:  0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14);
  --shadow-8:  0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14);
  --shadow-16: 0 0 2px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.14);

  /* ---- Borders ---- */
  --border-width-thin: 1px;
  --border-width-thick: 2px; /* focus rings, selected states */

  /* ---- Motion — utilitarian, not springy. Fluent uses fast, linear-ish
     eases; nothing bounces in an admin console. ---- */
  --motion-duration-fast: 100ms; /* @kind other */
  --motion-duration-normal: 150ms; /* @kind other */
  --motion-duration-slow: 250ms; /* @kind other */
  --motion-ease-standard: cubic-bezier(0.33, 0, 0.67, 1); /* @kind other */
  --motion-ease-decelerate: cubic-bezier(0.1, 0.9, 0.2, 1); /* @kind other */
  --motion-ease-accelerate: cubic-bezier(0.7, 0, 1, 0.5); /* @kind other */
}