/* ============================================================
   QMAS — Spacing, Radius & Sizing Tokens
   8-point grid. Two-tier radius (6 interactive / 8 container).
   ============================================================ */

:root {
  /* ---- Spacing scale (8px grid) ---- */
  --space-xxs: 4px;    /* icon→text in tag/badge */
  --space-xs: 8px;     /* icon→text, tight list rows */
  --space-sm: 12px;    /* compact gaps */
  --space-md: 16px;    /* DEFAULT — between components */
  --space-lg: 24px;    /* standard card padding, section gap */
  --space-xl: 32px;    /* major section break */
  --space-xxl: 48px;   /* page-level rhythm */

  /* Component padding presets */
  --padding-card: 24px;        /* standard card */
  --padding-card-dense: 16px;  /* data-heavy / dashboard card */
  --padding-control-h: 12px;   /* input / button horizontal */

  /* ---- Border radius (two-tier) ---- */
  --radius-xs: 2px;    /* tags, badges */
  --radius-sm: 4px;    /* dense controls */
  --radius: 6px;       /* INTERACTIVE: button, input, select, dropdown */
  --radius-lg: 8px;    /* CONTAINER: card, modal, panel, drawer */
  --radius-xl: 12px;   /* large feature panels */
  --radius-full: 9999px;

  /* ---- Control heights ---- */
  --control-height-sm: 24px;
  --control-height: 32px;       /* DEFAULT */
  --control-height-lg: 40px;

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-width-bold: 2px;

  /* ---- Layout dims ---- */
  --nav-rail-width: 64px;       /* QMAS left icon rail */
  --topbar-height: 56px;        /* QMAS top bar */
  --z-dropdown: 1050; /* @kind other */
  --z-modal: 1000; /* @kind other */
  --z-popover: 1030; /* @kind other */
  --z-tooltip: 1070; /* @kind other */
}