/* ============================================================
   Focus Managed Services — Radii, Borders & Elevation
   The logomark is built from circular nodes, so the system
   leans lightly rounded — never pill-soft on structural cards,
   fully round only on nodes, avatars, dots and toggles.
   Shadows are cool and tight (charcoal-tinted), not fluffy.
   ============================================================ */
:root {
  /* ---------- Radii ---------- */
  --radius-none: 0;
  --radius-xs:  3px;
  --radius-sm:  5px;
  --radius-md:  8px;    /* default: buttons, inputs, chips */
  --radius-lg:  12px;   /* cards, panels */
  --radius-xl:  16px;   /* large surfaces, modals */
  --radius-2xl: 22px;
  --radius-full: 9999px;

  /* ---------- Border widths ---------- */
  --border-width: 1px;
  --border-width-2: 2px;
  --border-width-accent: 3px;   /* brand rules / active tabs */

  /* ---------- Elevation (charcoal-tinted, cool) ---------- */
  --shadow-xs: 0 1px 2px rgba(20, 19, 25, 0.06);
  --shadow-sm: 0 1px 2px rgba(20, 19, 25, 0.06),
               0 1px 3px rgba(20, 19, 25, 0.10);
  --shadow-md: 0 2px 4px rgba(20, 19, 25, 0.06),
               0 4px 12px rgba(20, 19, 25, 0.10);
  --shadow-lg: 0 8px 24px rgba(20, 19, 25, 0.12),
               0 2px 6px rgba(20, 19, 25, 0.08);
  --shadow-xl: 0 18px 48px rgba(20, 19, 25, 0.18),
               0 6px 16px rgba(20, 19, 25, 0.10);

  /* Brand-tinted glow for primary emphasis / focus wells */
  --shadow-brand: 0 6px 20px rgba(238, 62, 53, 0.32);

  /* Ring used for keyboard focus */
  --ring-focus: 0 0 0 3px var(--focus-ring);
}