/* ============================================================
   CShield · Spacing, layout & radius tokens
   Base unit 4px. Scale: 4 8 12 16 20 24 32 40 48 64 80 96.
   Radii softer than typical fintech to support warmth posture.
   RULE: single-sided borders never get rounded corners (radius 0).
   ============================================================ */
:root {
  /* ---- Spacing scale ---- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;

  /* ---- Layout ---- */
  --container-max: 1280px;       /* Web Portal / Admin Console */
  --gutter-desktop: 24px;
  --gutter-mobile: 16px;
  --section-gap: 48px;           /* between major sections */
  --group-gap: 24px;             /* between related groups */
  --grid-gap: 16px;              /* card grids */
  --grid-gap-tight: 8px;         /* chip groups */

  /* ---- Border radius ---- */
  --radius-4: 4px;      /* small inline chips, tags, indicators */
  --radius-6: 6px;      /* chips, badges, small tags */
  --radius-8: 8px;      /* buttons, inputs, search, small cards */
  --radius-12: 12px;    /* cards, panels, dropdowns (default surface) */
  --radius-16: 16px;    /* modals, sheets (web), hero panels, onboarding */
  --radius-24: 24px;    /* bottom sheets (mobile, top only), large overlays */
  --radius-full: 9999px;/* avatars, status dots, toggle thumbs */

  /* ---- Border widths ---- */
  --border-hairline: 0.5px;   /* @kind spacing */ /* preferred separator in data-dense views */
  --border-thin: 1px;         /* @kind spacing */
  --border-accent: 2px;       /* @kind spacing */ /* focus ring, selected indicator, focused input */
  --border-severity: 4px;     /* @kind spacing */ /* left accent on scan-result / inline alert (radius 0) */
}