/*
Purpose: Global design tokens for ZenixMarket ERP.
Used by: All Razor Pages, shared partials, and component styles.
Why: Centralizes color, spacing, shadow, radius, and layout variables so future UI changes are controlled globally.
*/

:root {
  color-scheme: light;
  --zm-primary: #2563eb;
  --zm-primary-strong: #1d4ed8;
  --zm-primary-soft: #dbeafe;
  --zm-accent: #f59e0b;
  --zm-background: #f5f7fb;
  --zm-background-elevated: #eef4ff;
  --zm-surface: #ffffff;
  --zm-surface-muted: #f8fafc;
  --zm-sidebar-surface: #ffffff;
  --zm-text: #111827;
  --zm-text-strong: #0f172a;
  --zm-muted: #667085;
  --zm-muted-strong: #475467;
  --zm-border: #d9e2ec;
  --zm-border-strong: #c7d2df;
  --zm-success: #16a34a;
  --zm-success-soft: #dcfce7;
  --zm-warning: #d97706;
  --zm-warning-soft: #fef3c7;
  --zm-danger: #dc2626;
  --zm-danger-soft: #fee2e2;
  --zm-info: #0891b2;
  --zm-info-soft: #cffafe;
  --zm-purple: #7c3aed;
  --zm-purple-soft: #ede9fe;
  --zm-radius-sm: 8px;
  --zm-radius-md: 12px;
  --zm-radius-lg: 16px;
  --zm-radius-xl: 22px;
  --zm-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --zm-shadow-md: 0 14px 34px rgba(16, 24, 40, 0.08);
  --zm-shadow-lg: 0 22px 50px rgba(16, 24, 40, 0.12);
  --zm-space-1: 0.25rem;
  --zm-space-2: 0.5rem;
  --zm-space-3: 0.75rem;
  --zm-space-4: 1rem;
  --zm-space-5: 1.25rem;
  --zm-space-6: 1.5rem;
  --zm-space-8: 2rem;
  --zm-space-10: 2.5rem;
  --zm-sidebar-width: 280px;
  --zm-sidebar-collapsed-width: 84px;
  --zm-topbar-height: 72px;
  --zm-transition: 180ms ease;
}

[data-theme="dark"] {
  color-scheme: dark;
  --zm-primary: #60a5fa;
  --zm-primary-strong: #93c5fd;
  --zm-primary-soft: rgba(96, 165, 250, 0.16);
  --zm-accent: #fbbf24;
  --zm-background: #0d1117;
  --zm-background-elevated: #111827;
  --zm-surface: #151b23;
  --zm-surface-muted: #1f2937;
  --zm-sidebar-surface: #111827;
  --zm-text: #e5e7eb;
  --zm-text-strong: #f9fafb;
  --zm-muted: #9ca3af;
  --zm-muted-strong: #d1d5db;
  --zm-border: #2d3748;
  --zm-border-strong: #3f4b5f;
  --zm-success: #4ade80;
  --zm-success-soft: rgba(74, 222, 128, 0.14);
  --zm-warning: #fbbf24;
  --zm-warning-soft: rgba(251, 191, 36, 0.16);
  --zm-danger: #f87171;
  --zm-danger-soft: rgba(248, 113, 113, 0.16);
  --zm-info: #22d3ee;
  --zm-info-soft: rgba(34, 211, 238, 0.16);
  --zm-purple: #a78bfa;
  --zm-purple-soft: rgba(167, 139, 250, 0.16);
  --zm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --zm-shadow-md: 0 18px 42px rgba(0, 0, 0, 0.34);
  --zm-shadow-lg: 0 26px 64px rgba(0, 0, 0, 0.42);
}