/**
 * ShopMS design tokens — 8px grid, semantic color, system UI font
 */
:root {
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-body: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-display: 2rem;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --color-bg: #f4f5f7;
  --color-surface: #ffffff;
  --color-border: #e2e4e9;
  --color-border-strong: #c9cdd4;
  --color-text: #1a1d24;
  --color-text-muted: #5c6370;
  --color-text-inverse: #ffffff;

  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-muted: #dbeafe;

  --color-success: #15803d;
  --color-success-bg: #dcfce7;
  --color-warning: #b45309;
  --color-warning-bg: #fef3c7;
  --color-danger: #b91c1c;
  --color-danger-bg: #fee2e2;
  --color-info: #0369a1;
  --color-info-bg: #e0f2fe;

  --shadow-elevate: 0 4px 24px rgba(15, 23, 42, 0.08);
  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.45);

  --sidebar-width: 240px;
  --header-height: 56px;

  --transition-drawer: 200ms ease-out;
}

[data-theme="dark"] {
  --color-bg: #12141a;
  --color-surface: #1c1f27;
  --color-border: #2d3340;
  --color-border-strong: #3d4555;
  --color-text: #e8eaef;
  --color-text-muted: #9aa3b2;
  --color-primary-muted: #1e3a5f;
  --color-success-bg: #14532d;
  --color-warning-bg: #713f12;
  --color-danger-bg: #7f1d1d;
  --color-info-bg: #0c4a6e;
  --shadow-elevate: 0 4px 24px rgba(0, 0, 0, 0.35);
  --focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.5);
}