:root {

  --color-primary: #4338ca;

  --color-primary-hover: #3730a3;

  --color-primary-soft: #eef2ff;

  --color-primary-ink: #ffffff;

  --color-success: #059669;

  --color-success-soft: #ecfdf5;

  --color-warning: #d97706;

  --color-warning-soft: #fffbeb;

  --color-danger: #dc2626;

  --color-danger-soft: #fef2f2;

  --color-info: #0891b2;

  --color-info-soft: #ecfeff;

  --color-espresso: #1c1917;

  --color-ivory: #f7f4ee;

  --color-bg: #f8fafc;

  --color-surface: #ffffff;

  --color-surface-raised: #ffffff;

  --color-input: #ffffff;

  --color-border: #e2e8f0;

  --color-border-strong: #cbd5e1;

  --color-text: #0f172a;

  --color-text-muted: #64748b;

  --color-shadow: 0 1px 2px rgb(15 23 42 / 0.06), 0 8px 24px rgb(15 23 42 / 0.06);

  --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.05);

  --shadow-md: 0 1px 2px rgb(15 23 42 / 0.06), 0 8px 24px rgb(15 23 42 / 0.06);

  --shadow-lg: 0 18px 40px rgb(15 23 42 / 0.12);

  --color-sidebar: #ffffff;

  --color-overlay: rgb(15 23 42 / 0.48);

  --color-focus: rgb(67 56 202 / 0.28);

  --radius-sm: 8px;

  --radius-md: 12px;

  --radius-lg: 16px;

  --text-xs: 12px;

  --text-sm: 13px;

  --text-md: 14px;

  --text-lg: 16px;

  --text-xl: 20px;

  --text-display: 28px;

  --text-stat: 32px;

  --space-1: 4px;

  --space-2: 8px;

  --space-3: 12px;

  --space-4: 16px;

  --space-5: 24px;

  --space-6: 32px;

  --space-7: 48px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  --duration-fast: 140ms;

  --duration: 180ms;

  --font: "Inter", "Plus Jakarta Sans", system-ui, sans-serif;

  --sidebar-width: 248px;

  --sidebar-collapsed: 76px;

  --topbar-height: 64px;

  --pos-topbar: 60px;

  --control-h: 44px;

  --cart-width: 400px;

}



[data-theme="dark"] {

  --color-bg: #0b1220;

  --color-surface: #151c2c;

  --color-surface-raised: #1b2436;

  --color-input: #101828;

  --color-border: #243044;

  --color-border-strong: #334155;

  --color-text: #f1f5f9;

  --color-text-muted: #94a3b8;

  --color-primary: #818cf8;

  --color-primary-hover: #a5b4fc;

  --color-primary-soft: #1e1b4b;

  --color-primary-ink: #0f172a;

  --color-success-soft: #064e3b;

  --color-warning-soft: #78350f;

  --color-danger-soft: #7f1d1d;

  --color-info-soft: #164e63;

  --color-ivory: #0f1624;

  --color-shadow: 0 1px 2px rgb(0 0 0 / 0.35), 0 8px 24px rgb(0 0 0 / 0.28);

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.28);

  --shadow-md: 0 1px 2px rgb(0 0 0 / 0.35), 0 8px 24px rgb(0 0 0 / 0.28);

  --shadow-lg: 0 18px 48px rgb(0 0 0 / 0.45);

  --color-sidebar: #151c2c;

  --color-overlay: rgb(0 0 0 / 0.62);

  --color-focus: rgb(129 140 248 / 0.38);

}



@media (prefers-reduced-motion: reduce) {

  :root {

    --duration-fast: 0ms;

    --duration: 0ms;

  }

}