/* MXERP Minimal Design System v4
   Three layers: primitive values -> semantic roles -> component contracts. */
:root{
  /* === 1. PRIMITIVES === */
  --primitive-white:hsl(0 0% 100%);
  --primitive-slate-25:hsl(210 40% 99%);
  --primitive-slate-50:hsl(210 40% 98%);
  --primitive-slate-100:hsl(214 32% 95%);
  --primitive-slate-200:hsl(214 25% 90%);
  --primitive-slate-300:hsl(213 20% 82%);
  --primitive-slate-400:hsl(215 16% 62%);
  --primitive-slate-500:hsl(215 16% 47%);
  --primitive-slate-600:hsl(215 19% 35%);
  --primitive-slate-700:hsl(215 25% 27%);
  --primitive-slate-800:hsl(217 33% 18%);
  --primitive-slate-900:hsl(222 47% 11%);
  --primitive-slate-950:hsl(229 52% 8%);
  --primitive-blue-50:hsl(214 100% 97%);
  --primitive-blue-100:hsl(214 95% 93%);
  --primitive-blue-200:hsl(213 97% 87%);
  --primitive-blue-500:hsl(217 91% 60%);
  --primitive-blue-600:hsl(221 83% 53%);
  --primitive-blue-700:hsl(224 76% 48%);
  --primitive-green-50:hsl(138 76% 97%);
  --primitive-green-200:hsl(141 69% 85%);
  --primitive-green-600:hsl(142 72% 29%);
  --primitive-amber-50:hsl(48 100% 96%);
  --primitive-amber-200:hsl(48 96% 76%);
  --primitive-amber-700:hsl(32 95% 30%);
  --primitive-red-50:hsl(0 86% 97%);
  --primitive-red-200:hsl(0 96% 89%);
  --primitive-red-600:hsl(0 72% 51%);

  --primitive-space-1:4px;
  --primitive-space-2:8px;
  --primitive-space-3:12px;
  --primitive-space-4:16px;
  --primitive-space-5:20px;
  --primitive-space-6:24px;
  --primitive-space-8:32px;
  --primitive-space-10:40px;
  --primitive-space-12:48px;
  --primitive-space-16:64px;

  --primitive-font-10:10px;
  --primitive-font-11:11px;
  --primitive-font-12:12px;
  --primitive-font-13:13px;
  --primitive-font-14:14px;
  --primitive-font-16:16px;
  --primitive-font-18:18px;
  --primitive-font-20:20px;
  --primitive-font-24:24px;

  --primitive-radius-4:4px;
  --primitive-radius-6:6px;
  --primitive-radius-8:8px;
  --primitive-radius-10:10px;
  --primitive-radius-12:12px;
  --primitive-radius-full:9999px;
  --primitive-duration-fast:150ms;
  --primitive-duration-normal:200ms;

  /* === 2. SEMANTIC ROLES === */
  --color-canvas:var(--primitive-slate-50);
  --color-surface:var(--primitive-white);
  --color-surface-subtle:var(--primitive-slate-25);
  --color-surface-muted:var(--primitive-slate-100);
  --color-text:var(--primitive-slate-900);
  --color-text-secondary:var(--primitive-slate-600);
  --color-text-tertiary:var(--primitive-slate-400);
  --color-border:var(--primitive-slate-200);
  --color-border-strong:var(--primitive-slate-300);
  --color-primary:var(--primitive-blue-600);
  --color-primary-hover:var(--primitive-blue-700);
  --color-primary-subtle:var(--primitive-blue-50);
  --color-primary-border:var(--primitive-blue-200);
  --color-success:var(--primitive-green-600);
  --color-success-subtle:var(--primitive-green-50);
  --color-success-border:var(--primitive-green-200);
  --color-warning:var(--primitive-amber-700);
  --color-warning-subtle:var(--primitive-amber-50);
  --color-warning-border:var(--primitive-amber-200);
  --color-danger:var(--primitive-red-600);
  --color-danger-subtle:var(--primitive-red-50);
  --color-danger-border:var(--primitive-red-200);
  --color-navigation:var(--primitive-slate-950);
  --color-navigation-hover:var(--primitive-slate-800);
  --color-navigation-text:hsl(215 20% 75%);
  --color-navigation-muted:hsl(215 16% 60%);
  --focus-ring:0 0 0 3px hsl(221 83% 53% / .18);
  --shadow-minimal:0 1px 2px hsl(222 47% 11% / .05);
  --shadow-overlay:0 18px 45px hsl(222 47% 11% / .16);
  --transition-interactive:color var(--primitive-duration-fast) ease,background-color var(--primitive-duration-fast) ease,border-color var(--primitive-duration-fast) ease,box-shadow var(--primitive-duration-fast) ease;

  /* === 3. COMPONENT CONTRACTS === */
  --layout-sidebar-width:200px;
  --layout-sidebar-compact-width:64px;
  --layout-topbar-height:38px;
  --layout-content-padding:16px;
  --card-bg:var(--color-surface);
  --card-border:var(--color-border);
  --card-radius:var(--primitive-radius-10);
  --card-padding:var(--primitive-space-4);
  --card-shadow:var(--shadow-minimal);
  --control-height-sm:28px;
  --control-height:34px;
  --control-height-lg:40px;
  --control-radius:var(--primitive-radius-6);
  --control-border:var(--color-border-strong);
  --button-bg:var(--color-primary);
  --button-bg-hover:var(--color-primary-hover);
  --button-fg:var(--primitive-white);
  --input-bg:var(--color-surface);
  --input-border:var(--control-border);
  --table-header-bg:var(--color-surface-subtle);
  --table-row-hover:var(--primitive-slate-50);
  --table-row-selected:var(--color-primary-subtle);
  --table-cell-x:12px;
  --table-cell-y:9px;
  --dialog-radius:var(--primitive-radius-12);
  --dialog-shadow:var(--shadow-overlay);
  --badge-radius:var(--primitive-radius-6);
  --page-gap:var(--primitive-space-3);
  --page-header-bg:var(--color-surface);
  --page-header-border:var(--color-border);
  --page-header-radius:var(--primitive-radius-10);
  --page-header-padding:var(--primitive-space-4);
  --page-icon-size:40px;
  --toolbar-bg:var(--color-surface);
  --toolbar-border:var(--color-border);
  --toolbar-radius:var(--primitive-radius-10);
  --toolbar-padding-y:var(--primitive-space-3);
  --toolbar-padding-x:var(--primitive-space-4);
  --section-bg:var(--color-surface);
  --section-border:var(--color-border);
  --section-radius:var(--primitive-radius-10);
  --section-padding:var(--primitive-space-4);
  --table-shell-bg:var(--color-surface);
  --table-shell-border:var(--color-border);
  --table-shell-radius:var(--primitive-radius-10);
  --tabs-bg:var(--color-surface-muted);
  --tabs-border:var(--color-border);
  --tabs-active-bg:var(--color-surface);
  --tabs-active-border:var(--color-border-strong);
  --empty-bg:var(--color-surface-subtle);
  --empty-border:var(--color-border-strong);
}