:root {
  /* ===== Brand ===== */
  --brand: #1f4287;
  --brand-hover: #2a55a8;
  --brand-active: #16336b;
  --brand-soft: #e8eef9;
  --brand-fg: #ffffff;

  /* ===== Neutral palette ===== */
  --color-bg: #f5f7fa;
  --color-surface: #ffffff;
  --color-surface-alt: #fafbfc;
  --color-border: #e4e7eb;
  --color-border-strong: #cbd2d9;
  --color-divider: #eef0f2;

  --color-text: #1f2933;
  --color-text-muted: #616e7c;
  --color-text-faint: #9aa5b1;
  --color-text-on-dark: #ffffff;

  /* ===== Semantic ===== */
  --color-success: #15803d;
  --color-success-soft: #dcfce7;
  --color-warning: #b45309;
  --color-warning-soft: #fef3c7;
  --color-danger: #b91c1c;
  --color-danger-soft: #fee2e2;
  --color-info: #1d4ed8;
  --color-info-soft: #dbeafe;

  /* ===== Order status colors (8 statuses) ===== */
  --status-created-fg: #1d4ed8;       --status-created-bg: #dbeafe;
  --status-approved-fg: #6d28d9;      --status-approved-bg: #ede9fe;
  --status-shipped-fg: #0e7490;       --status-shipped-bg: #cffafe;
  --status-delivered-fg: #15803d;     --status-delivered-bg: #dcfce7;
  --status-returned-fg: #b45309;      --status-returned-bg: #fef3c7;
  --status-refused-fg: #be123c;       --status-refused-bg: #ffe4e6;
  --status-cancelled-fg: #525b66;     --status-cancelled-bg: #e4e7eb;
  --status-lost-fg: #7c2d12;          --status-lost-bg: #fed7aa;

  /* ===== Spacing scale (4-pt) ===== */
  --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;

  /* ===== Typography ===== */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --text-3xl: 28px;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ===== Radii ===== */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* ===== Shadow ===== */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 2px 6px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.10);

  /* ===== Layout ===== */
  --sidebar-width: 220px;
  --sidebar-collapsed-width: 56px;
  --header-height: 56px;
  --content-max-width: 1400px;

  /* ===== Motion ===== */
  --transition-fast: 120ms ease;
  --transition-base: 180ms ease;

  /* ===== Z-index ===== */
  --z-sticky: 100;
  --z-overlay: 1000;
  --z-toast: 2000;
}