/* ==========================================================================
   genxbuy.com - Global Theme Variables & Color Palette
   Brand Colors:
     - Primary Blue: #3CACF0
     - Hover Blue:   #299be6
     - Red Accent:   #DC2626
     - Black:        #000000
     - White:        #FFFFFF
   Centralized Design System: Change colors here to update across the entire site.
   ========================================================================== */

:root {
  /* ----------------------------------------------------
     1. Brand Colors & Accents
     ---------------------------------------------------- */
  --color-primary: #3CACF0;
  --color-primary-hover: #299be6;
  --color-primary-light: rgba(60, 172, 240, 0.1);
  --color-primary-rgb: 60, 172, 240;
  --color-red: #DC2626;
  --color-red-hover: #b91c1c;
  --color-red-light: rgba(220, 38, 38, 0.1);

  /* ----------------------------------------------------
     2. Neutrals, Surfaces & Backgrounds
     ---------------------------------------------------- */
  --color-black: #000000;
  --color-dark: #0a0a0a;
  --color-dark-surface: #121212;
  --color-white: #FFFFFF;
  --color-bg-page: #F8FAFC;
  --color-border: #1f1f1f;
  --color-border-light: #E2E8F0;
  --color-text-main: #0F172A;
  --color-text-light: #e5e5e5;
  --color-text-muted: #999999;
  --color-text-slate: #64748B;

  /* ----------------------------------------------------
     3. Header & Navigation Tokens
     ---------------------------------------------------- */
  --header-height: 80px;
  --topbar-height: 40px;
  --shadow-dropdown: 0 10px 30px rgba(0, 0, 0, 0.5);

  /* ----------------------------------------------------
     4. Cart & Commerce Tokens
     ---------------------------------------------------- */
  --cart-primary: var(--color-primary);
  --cart-primary-dark: var(--color-primary-hover);
  --cart-primary-light: #eef7fd;
  --cart-primary-rgb: var(--color-primary-rgb);
  --cart-dark: var(--color-black);
  --cart-gray-dark: #1a1a1a;
  --cart-gray: #666666;
  --cart-gray-light: #f5f5f5;
  --cart-border: #e5e7eb;
  --cart-danger: var(--color-red);
  --cart-success: var(--color-primary);
  --cart-warning: #f59e0b;
  --cart-radius: 12px;
  --cart-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

  /* ----------------------------------------------------
     5. Page Component Aliases (About, Repair, etc.)
     ---------------------------------------------------- */
  --about-primary: var(--color-primary);
  --about-primary-hover: var(--color-primary-hover);
  --about-primary-light: var(--color-primary-light);
  --about-bg-dark: var(--color-black);
  --about-bg-card: var(--color-white);
  --about-text-main: var(--color-text-main);
  --about-text-muted: var(--color-text-slate);
  --about-border: var(--color-border-light);
  --about-radius: 12px;
  --about-radius-lg: 16px;

  --repair-primary: var(--color-primary);
  --repair-primary-hover: var(--color-primary-hover);
  --repair-primary-light: var(--color-primary-light);
  --repair-bg-dark: var(--color-black);
  --repair-bg-card: var(--color-white);
  --repair-text-main: var(--color-text-main);
  --repair-text-muted: var(--color-text-slate);
  --repair-border: var(--color-border-light);
  --repair-radius: 12px;
  --repair-radius-lg: 16px;

  /* ----------------------------------------------------
     6. Typography, Radii & Transitions
     ---------------------------------------------------- */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 9999px;
}