/* ==========================================================================
   MANSATI STORE MANAGEMENT SYSTEM — DESIGN SYSTEM TOKENS
   ========================================================================== */

:root {
  /* Brand Colors - Luxury Modern Palette */
  --primary-50: #eef2ff;
  --primary-100: #e0e7ff;
  --primary-200: #c7d2fe;
  --primary-300: #a5b4fc;
  --primary-400: #818cf8;
  --primary-500: #6366f1; /* Main Mansati Indigo */
  --primary-600: #4f46e5;
  --primary-700: #4338ca;
  --primary-800: #3730a3;
  --primary-900: #312e81;

  --accent-500: #06b6d4;  /* Cyan / Electric */
  --accent-purple: #8b5cf6;
  
  --success-50: #ecfdf5;
  --success-500: #10b981;
  --success-600: #059669;
  
  --warning-50: #fffbeb;
  --warning-500: #f59e0b;
  --warning-600: #d97706;

  --danger-50: #fef2f2;
  --danger-500: #ef4444;
  --danger-600: #dc2626;

  --info-500: #3b82f6;

  /* Typography */
  --font-family: 'Cairo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  /* Spacing */
  --sidebar-width: 270px;
  --sidebar-collapsed-width: 76px;
  --header-height: 70px;
  --bottom-nav-height: 65px;

  /* Default Dark Mode Values */
  --bg-app: #0b0f19;
  --bg-surface: #111827;
  --bg-surface-elevated: #1e293b;
  --bg-subtle: #192231;
  --bg-hover: #232f45;
  
  --border-color: #273549;
  --border-subtle: #1e293b;
  
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-subtle: #64748b;
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 10px 24px -3px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 20px 30px -5px rgba(0, 0, 0, 0.6);
  
  --card-glass: rgba(17, 24, 39, 0.85);
  --glass-border: rgba(255, 255, 255, 0.08);

  --badge-bg-success: rgba(16, 185, 129, 0.15);
  --badge-text-success: #34d399;
  --badge-border-success: rgba(16, 185, 129, 0.3);

  --badge-bg-warning: rgba(245, 158, 11, 0.15);
  --badge-text-warning: #fbbf24;
  --badge-border-warning: rgba(245, 158, 11, 0.3);

  --badge-bg-danger: rgba(239, 68, 68, 0.15);
  --badge-text-danger: #f87171;
  --badge-border-danger: rgba(239, 68, 68, 0.3);

  --input-bg: #192231;
  --input-border: #273549;
}

/* Explicit Dark Theme */
[data-theme="dark"], html[data-theme="dark"] {
  --bg-app: #0b0f19;
  --bg-surface: #111827;
  --bg-surface-elevated: #1e293b;
  --bg-subtle: #192231;
  --bg-hover: #232f45;
  
  --border-color: #273549;
  --border-subtle: #1e293b;
  
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-subtle: #64748b;
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 10px 24px -3px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 20px 30px -5px rgba(0, 0, 0, 0.6);
  
  --card-glass: rgba(17, 24, 39, 0.85);
  --glass-border: rgba(255, 255, 255, 0.08);

  --badge-bg-success: rgba(16, 185, 129, 0.15);
  --badge-text-success: #34d399;
  --badge-border-success: rgba(16, 185, 129, 0.3);

  --badge-bg-warning: rgba(245, 158, 11, 0.15);
  --badge-text-warning: #fbbf24;
  --badge-border-warning: rgba(245, 158, 11, 0.3);

  --badge-bg-danger: rgba(239, 68, 68, 0.15);
  --badge-text-danger: #f87171;
  --badge-border-danger: rgba(239, 68, 68, 0.3);

  --input-bg: #192231;
  --input-border: #273549;
}

/* Light Theme (Crisp, High-Contrast Modern Aesthetic) */
[data-theme="light"], html[data-theme="light"] {
  --bg-app: #f1f5f9;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #ffffff;
  --bg-subtle: #f8fafc;
  --bg-hover: #e2e8f0;
  
  --border-color: #cbd5e1;
  --border-subtle: #e2e8f0;
  
  --text-main: #0f172a;
  --text-muted: #475569;
  --text-subtle: #64748b;
  
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 10px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.09), 0 4px 6px -4px rgba(0, 0, 0, 0.03);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  
  --card-glass: rgba(255, 255, 255, 0.95);
  --glass-border: rgba(203, 213, 225, 0.6);

  --badge-bg-success: #ecfdf5;
  --badge-text-success: #065f46;
  --badge-border-success: #a7f3d0;

  --badge-bg-warning: #fffbeb;
  --badge-text-warning: #92400e;
  --badge-border-warning: #fde68a;

  --badge-bg-danger: #fef2f2;
  --badge-text-danger: #991b1b;
  --badge-border-danger: #fecaca;

  --input-bg: #ffffff;
  --input-border: #cbd5e1;
}