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

:root {
  /* Brand Primary Colors (Consolidated Vibrant Electric Blue) */
  --primary: #0060f6;
  --primary-dark: #0050d0;
  --primary-light: #3380f8;
  --primary-subtle: #edf4ff;
  --primary-rgb: 0, 96, 246;

  /* Brand Secondary Colors (Accent Orange) */
  --secondary: #fb641b;
  --secondary-dark: #e55a15;
  --secondary-light: #ff7d3b;
  --secondary-subtle: #fff3ec;
  --secondary-rgb: 251, 100, 27;

  /* Semantic Status Colors */
  --success: #15803d;
  --success-dark: #166534;
  --success-light: #22c55e;
  --success-subtle: #e8f7ee;
  --success-rgb: 21, 128, 61;
  --accent-green: var(--success);

  --warning: #f5a524;
  --warning-dark: #d98a0b;
  --warning-light: #fbbf4d;
  --warning-subtle: #fff6e6;
  --warning-rgb: 245, 165, 36;
  --accent-yellow: var(--warning);

  --danger: #d92d30;
  --danger-dark: #b92427;
  --danger-light: #f07a7c;
  --danger-subtle: #fdecec;
  --danger-rgb: 217, 45, 48;
  --accent-red: var(--danger);

  --info: #00bad1;
  --info-dark: #0098ab;
  --info-light: #33c8da;
  --info-subtle: #d6f4f8;
  --info-rgb: 0, 186, 209;
  --accent-blue: var(--info);

  /* Surfaces & Backgrounds */
  --bg-body: #ffffff;
  --bg-surface: #ffffff;
  --bg-light: #f4f6f9;
  --bg-lighter: #f8fafc;
  --bg-subtle: #f8fafc;
  --page-header-bg: #f1f5fb;
  --header-bg: #111b2e;
  --header-text: #ffffff;
  --white: #ffffff;
  --white-rgb: 255, 255, 255;

  /* Text & Content Colors */
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-muted-light: #8b95a7;
  --dark: var(--text-primary);
  --dark-secondary: var(--text-secondary);
  --muted: var(--text-muted);
  --muted-light: var(--text-muted-light);

  /* Border Colors */
  --border: #e2e8f0;
  --border-light: #eaeef3;
  --border-subtle: #f1f5f9;
  --border-dark: #cbd5e1;
  --border-color: var(--border);

  /* Bootstrap 5 Theme Variable Bridge */
  --bs-primary: var(--primary);
  --bs-primary-rgb: var(--primary-rgb);
  --bs-primary-bg-subtle: var(--primary-subtle);
  --bs-secondary: var(--secondary);
  --bs-secondary-rgb: var(--secondary-rgb);
  --bs-secondary-bg-subtle: var(--secondary-subtle);
  --bs-success: var(--success);
  --bs-success-rgb: var(--success-rgb);
  --bs-success-bg-subtle: var(--success-subtle);
  --bs-warning: var(--warning);
  --bs-warning-rgb: var(--warning-rgb);
  --bs-warning-bg-subtle: var(--warning-subtle);
  --bs-danger: var(--danger);
  --bs-danger-rgb: var(--danger-rgb);
  --bs-danger-bg-subtle: var(--danger-subtle);
  --bs-info: var(--info);
  --bs-info-rgb: var(--info-rgb);
  --bs-info-bg-subtle: var(--info-subtle);
  --bs-body-bg: var(--bg-body);
  --bs-body-color: var(--text-primary);
  --bs-border-color: var(--border);
  --bs-border-color-translucent: rgba(var(--shadow-color), 0.1);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-xl: var(--radius-xl);
  --bs-link-color: var(--primary);
  --bs-link-color-rgb: var(--primary-rgb);
  --bs-link-hover-color: var(--primary-dark);
  --bs-focus-ring-color: rgba(var(--primary-rgb), 0.25);
  --bs-box-shadow: var(--shadow-md);
  --bs-box-shadow-sm: var(--shadow-sm);
  --bs-box-shadow-lg: var(--shadow-lg);

  /* Soft surface gradients - subtle, light tints of the brand blue */
  --gradient-soft: linear-gradient(135deg, #f4f8ff 0%, #eef4ff 50%, #f6f4ff 100%);
  --gradient-soft-vertical: linear-gradient(180deg, #f6f9ff 0%, #edf3ff 100%);
  --gradient-page-header: linear-gradient(120deg, #f1f5fb 0%, #f4f2fd 100%);

  /* Header gradients */
  --gradient-header: linear-gradient(115deg, #0a1120 0%, #0f1d3d 55%, #18306b 100%);
  --gradient-topbar: linear-gradient(90deg, #1d4ed8 0%, #4f46e5 55%, #7c3aed 100%);
  --gradient-accent: linear-gradient(135deg, var(--primary) 0%, #4f46e5 100%);
  --gradient-accent-hover: linear-gradient(135deg, var(--primary-dark) 0%, #4338ca 100%);

  /* Promotional Banner Themes */
  --promo-purple-from: #6366f1;
  --promo-purple-to: #8b5cf6;
  --promo-purple-text: #7f56d9;
  --promo-red-from: #be123c;
  --promo-red-to: #9f1239;
  --promo-red-text: #d92d20;
  --promo-green-from: #708871;
  --promo-green-to: #5f7161;
  --promo-green-text: #669f2a;
  --promo-peach-bg: #f0d9c8;
  --promo-dark-from: #1a1a2e;
  --promo-dark-to: #16213e;
  --promo-dual-purple-from: #667eea;
  --promo-dual-purple-to: #764ba2;
  --promo-dual-coral-from: #f97316;
  --promo-dual-coral-to: #ef4444;

  /* 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 - Soft Rounded */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 50%;

  /* Shadows - Soft, slate-tinted layers */
  --shadow-color: 15, 23, 42;
  --shadow-sm: 0 1px 2px rgba(var(--shadow-color), 0.05);
  --shadow-md: 0 1px 2px rgba(var(--shadow-color), 0.04), 0 6px 16px -4px rgba(var(--shadow-color), 0.10);
  --shadow-lg: 0 2px 4px rgba(var(--shadow-color), 0.04), 0 14px 32px -8px rgba(var(--shadow-color), 0.16);
  --shadow-xl: 0 4px 8px rgba(var(--shadow-color), 0.04), 0 24px 48px -12px rgba(var(--shadow-color), 0.22);
  --shadow-primary: 0 6px 16px -6px rgba(var(--primary-rgb), 0.55);
  --focus-ring: 0 0 0 3px rgba(var(--primary-rgb), 0.25);

  /* Transitions */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 0.15s var(--ease-out);
  --transition-base: 0.2s var(--ease-out);
  --transition-slow: 0.3s var(--ease-out);
  --transition-slower: 0.5s var(--ease-out);

  /* 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;
  --container-xxl: 1600px;
}

/* Dark Mode Theme Support */
[data-bs-theme="dark"] {
  --bg-body: #12151e;
  --bg-surface: #1a1e2d;
  --bg-light: #22283a;
  --bg-lighter: #1e2333;
  --bg-subtle: #272d42;
  --page-header-bg: #1e2436;
  --header-bg: #0f1422;

  --text-primary: #e9ecf2;
  --text-secondary: #c5cbd8;
  --text-muted: #949db2;
  --text-muted-light: #737c92;
  --dark: var(--text-primary);
  --dark-secondary: var(--text-secondary);
  --muted: var(--text-muted);
  --muted-light: var(--text-muted-light);

  --border: #2d354b;
  --border-light: #252c3f;
  --border-subtle: #1e2436;
  --border-dark: #3a4460;
  --border-color: var(--border);

  --primary-subtle: rgba(0, 96, 246, 0.2);
  --secondary-subtle: rgba(251, 100, 27, 0.2);
  --success-subtle: rgba(21, 128, 61, 0.2);
  --warning-subtle: rgba(245, 165, 36, 0.2);
  --danger-subtle: rgba(217, 45, 48, 0.2);
  --info-subtle: rgba(0, 186, 209, 0.2);
}