/* ============================================================
   EAZYMART PREMIUM - Design System Variables
   Blinkit/Instamart-inspired design tokens
   Mobile-first | 60fps animations | Modern spacing
============================================================ */

:root {
  /* ==================== BRAND COLORS ==================== */
  --brand-blue: #042853;
  --brand-blue-dark: #021b36;
  --brand-blue-light: #0B2E4A;
  --brand-gold: #FFD839;
  --brand-gold-dark: #d6b126;
  --brand-gold-light: #ffe066;
  
  /* Accent colors */
  --accent-green: #0da487;
  --accent-red: #e23744;
  --accent-orange: #ff6b35;
  
  /* ==================== BACKGROUNDS ==================== */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fb;
  --bg-tertiary: #f0f3f7;
  --bg-soft: #fafbfc;
  --bg-overlay: rgba(4, 40, 83, 0.6);
  
  /* ==================== TEXT COLORS ==================== */
  --text-primary: #0f1419;
  --text-secondary: #536471;
  --text-tertiary: #8b98a5;
  --text-white: #ffffff;
  --text-gold: #d6b126;
  
  /* ==================== BORDER COLORS ==================== */
  --border-light: #e7ecf0;
  --border-medium: #cfd9de;
  --border-dark: #a0b3bf;
  --border-focus: var(--brand-gold);
  
  /* ==================== SHADOWS (Blinkit-style) ==================== */
  --shadow-xs: 0 1px 2px rgba(4, 40, 83, 0.04);
  --shadow-sm: 0 2px 8px rgba(4, 40, 83, 0.06);
  --shadow-md: 0 4px 16px rgba(4, 40, 83, 0.08);
  --shadow-lg: 0 8px 24px rgba(4, 40, 83, 0.12);
  --shadow-xl: 0 12px 36px rgba(4, 40, 83, 0.16);
  --shadow-2xl: 0 20px 48px rgba(4, 40, 83, 0.20);
  
  /* ==================== BORDER RADIUS ==================== */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
  
  /* ==================== SPACING SCALE ==================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  
  /* ==================== TYPOGRAPHY ==================== */
  --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Font sizes (mobile-first) */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --text-3xl: 26px;
  --text-4xl: 32px;
  
  /* Font weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  
  /* Line heights */
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  
  /* ==================== TRANSITIONS (60fps optimized) ==================== */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 350ms;
  
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  
  /* ==================== Z-INDEX SYSTEM ==================== */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 1000;
  --z-mini-cart: 1500;
  --z-bottom-nav: 1600;
  --z-drawer: 2000;
  --z-modal-backdrop: 2500;
  --z-modal: 3000;
  --z-toast: 4000;
  
  /* ==================== LAYOUT ==================== */
  --max-width-mobile: 100%;
  --max-width-tablet: 768px;
  --max-width-desktop: 1280px;
  --max-width-wide: 1440px;
  
  --header-height-mobile: 60px;
  --header-height-desktop: 72px;
  --bottom-nav-height: 64px;
  
  /* ==================== GRID SYSTEM ==================== */
  --grid-gap-mobile: 12px;
  --grid-gap-desktop: 20px;
  --grid-cols-mobile: 2;
  --grid-cols-tablet: 3;
  --grid-cols-desktop: 4;
  --grid-cols-wide: 6;
  
  /* ==================== PRODUCT CARD DIMENSIONS ==================== */
  --card-width-mobile: 152px;
  --card-width-desktop: 220px;
  --card-image-height-mobile: 140px;
  --card-image-height-desktop: 180px;
  
  /* ==================== ANIMATION PRESETS ==================== */
  --slide-in-up: translateY(20px);
  --slide-in-down: translateY(-20px);
  --slide-in-left: translateX(-20px);
  --slide-in-right: translateX(20px);
  --scale-in: scale(0.95);
  --scale-out: scale(1.05);
}
/* ============================================================
   LIGHT MODE COLORS (DEFAULT)
============================================================ */

:root {
  /* Text colors - MUST be dark for light backgrounds */
  --text-primary: #1a1a1a;          /* Almost black (was too light?) */
  --text-secondary: #666666;         /* Dark grey */
  --text-tertiary: #999999;          /* Medium grey */
  
  /* Background colors - Light */
  --bg-primary: #ffffff;             /* Pure white */
  --bg-secondary: #f5f5f5;           /* Off-white */
  --bg-tertiary: #eeeeee;            /* Light grey */
  --bg-soft: #f9f9f9;                /* Soft white */
  
  /* Product card specific */
  --card-bg: #ffffff;
  --card-text: #1a1a1a;              /* Dark text on white cards */
  --card-border: #e0e0e0;
}


/* ==================== DARK MODE SUPPORT ==================== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #0f1419;
    --bg-secondary: #16181c;
    --bg-tertiary: #1e2024;
    --bg-soft: #272a2f;
    
    --text-primary: #e7e9ea;
    --text-secondary: #a0b3bf;
    --text-tertiary: #6e7a85;
    
    --border-light: #2f3336;
    --border-medium: #3e4347;
    --border-dark: #51575c;
    
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
  }
}

/* ==================== RESPONSIVE BREAKPOINTS ==================== */
/* Usage: @media (min-width: 768px) { ... } */
/* 
   Mobile: < 768px (default)
   Tablet: 768px - 1024px
   Desktop: 1024px - 1440px
   Wide: > 1440px
*/