/* ============================================
   DESIGN TOKENS - ELECTECH E-COMMERCE
   ============================================ */

:root {
  /* Primary Colors */
  --primary: #146cda;
  --primary-dark: #1e5dd1;
  --primary-light: #5294f5;
  --secondary: #fb641b;
  --secondary-dark: #e55a15;

  /* Accent Colors */
  --accent-yellow: #ffc107;
  --accent-green: #28a745;
  --accent-red: #dc3545;

  /* Neutral Colors */
  --dark: #212121;
  --dark-secondary: #333333;
  --muted: #757575;
  --muted-light: #999999;
  --border: #e0e0e0;
  --border-light: #eeeeee;
  --bg-light: #f5f5f5;
  --bg-lighter: #fafafa;
  --page-header-bg: #e6edf5;
  --white: #ffffff;

  /* Typography */
  --font-primary: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Font Sizes */
  --fs-xs: 0.75rem;
  /* 12px */
  --fs-sm: 0.8125rem;
  /* 13px */
  --fs-base: 0.875rem;
  /* 14px */
  --fs-md: 1rem;
  /* 16px */
  --fs-lg: 1.125rem;
  /* 18px */
  --fs-xl: 1.25rem;
  /* 20px */
  --fs-2xl: 1.5rem;
  /* 24px */
  --fs-3xl: 2rem;
  /* 32px */
  --fs-4xl: 2.5rem;
  /* 40px */

  /* Spacing - Compact Updates */
  --space-xs: 0.2rem;
  /* ~3.2px */
  --space-sm: 0.4rem;
  /* ~6.4px */
  --space-md: 0.8rem;
  /* ~12.8px */
  --space-lg: 1.2rem;
  /* ~19.2px */
  --space-xl: 1.8rem;
  /* ~28.8px */
  --space-2xl: 2.5rem;
  /* ~40px */
  --space-3xl: 3.5rem;
  /* ~56px */

  /* Border Radius - Square Rounded */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-full: 50%;

  /* Shadows - Modern Flat */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
  --transition-slower: 0.5s ease;

  /* Z-Index */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-tooltip: 600;

  /* Container Max Widths - Wider */
  --container-sm: 540px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1400px;
  /* Increased */
  --container-xxl: 1600px;
  /* Increased significantly */
}

/* Dark Mode Support (Optional) */
@media (prefers-color-scheme: dark) {
  :root {
    /* Override for dark mode if needed */
  }
}