:root {
  /* ── Spacing scale (4px base) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Layout tokens (from brand.html Section 04) ── */
  --layout-sidebar-width: 220px;
  --layout-topbar-height: 56px;
  --layout-page-max-width: 1200px;
  --layout-content-max-width: 1280px;

  /* ── Border radius ── */
  --radius-sm: 8px;     /* small chips, table rows */
  --radius-md: 12px;    /* buttons, inputs, nav items */
  --radius-lg: 16px;    /* inner cards, sidebar container */
  --radius-xl: 20px;    /* outer cards, panels */
  --radius-pill: 999px; /* status badges */

  /* ── Borders ── */
  --border-width: 1.5px;
  --border-width-hairline: 1px;

  /* ── Shadows ── */
  --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.06);
  --shadow-elevated: 0 4px 24px rgba(0, 0, 0, 0.07);
  --shadow-subtle: 0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.12);
}