@layer base {
  :root {
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;

    --radius-xs: 8px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;

    --elevation-0: none;
    --elevation-1: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 14px rgba(15, 23, 42, 0.04));
    --elevation-2: var(--shadow-md, 0 2px 6px rgba(15, 23, 42, 0.05), 0 12px 28px rgba(15, 23, 42, 0.06));
    --elevation-3: var(--shadow-lg, 0 6px 16px rgba(15, 23, 42, 0.06), 0 20px 40px rgba(15, 23, 42, 0.07));

    --density-compact: 0.92;
    --density-default: 1;
    --density-comfortable: 1.08;

    --dur-instant: 120ms;
    --dur-fast: 180ms;
    --dur-base: 240ms;
    --motion-fast: var(--dur-instant);
    --motion-base: var(--dur-fast);
    --motion-slow: var(--dur-base);
    --motion-ease: cubic-bezier(0.33, 1, 0.68, 1);

    /* Layer stack — single source of truth (low → high) */
    --z-base: 0;
    --z-sidebar: 90;
    --z-topbar: 100;
    --z-sticky: 100;
    --z-dropdown: 3200;
    --z-mobile-nav: 6000;
    --z-mobile-sheet: 6200;
    --z-pwa-banner: 6250;
    --z-overlay: 9800;
    --z-modal: 10000;
    --z-scanner: 11050;
    --z-toast: 12000;
  }
}