/* ===== MAKHIMARKET TECHNOLOGY COLOR SYSTEM ===== */
/* Modern technology-focused color scheme using CSS custom properties */
/* Inspired by leading tech companies: blue-based with modern accents */

:root {
  /* ===== BRAND COLORS ===== */
  --brand-primary: #0066cc !important;        /* Tech blue - used for primary buttons, highlights */
  --brand-primary-light: #3385d6 !important;  /* Lighter tech blue */
  --brand-primary-dark: #0052a3 !important;   /* Darker tech blue */
  --brand-primary-darker: #003d7a !important; /* Even darker tech blue */
  --brand-primary-darkest: #002952 !important; /* Darkest tech blue */

  --brand-secondary: #00d4ff !important;      /* Cyan accent color */
  --brand-secondary-light: #4ddfff !important; /* Light cyan */
  --brand-secondary-dark: #00b8e6 !important;  /* Dark cyan */
  --brand-secondary-darker: #009cc6 !important; /* Darker cyan */

  /* ===== TECH COMPANY COLORS ===== */
  --tech-primary: #1a73e8 !important;         /* Google/Microsoft blue */
  --tech-primary-hover: #1557b0 !important;   /* Tech blue hover */
  --tech-primary-dark: #1557b0 !important;    /* Tech blue dark */
  --tech-accent: #00acc1 !important;          /* Tech teal/link color */
  --tech-accent-dark: #00838f !important;     /* Darker tech teal */

  /* ===== MODERN ACCENT COLORS ===== */
  --accent-purple: #6366f1 !important;        /* Modern purple */
  --accent-purple-dark: #4f46e5 !important;   /* Darker purple */
  --accent-green: #10b981 !important;         /* Modern green */
  --accent-orange: #f59e0b !important;        /* Modern orange */
  --accent-pink: #ec4899 !important;          /* Modern pink */
  --accent-red: #ef4444 !important;           /* Modern red */
  --accent-yellow: #eab308 !important;        /* Modern yellow */

  /* ===== TEXT COLORS ===== */
  --text-primary: #1f2937 !important;        /* Modern dark gray text */
  --text-secondary: #404349 !important;      /* Modern medium gray text */
  --text-muted: #9ca3af !important;         /* Muted gray text */
  --text-light: #ffffff !important;         /* Light text for dark backgrounds */
  --text-accent: #1f2937 !important;        /* Accent text color */
  --text-warning: #d97706 !important;       /* Tech warning text */
  --text-success: #10b981 !important;       /* Tech success text */
  --text-error: #ef4444 !important;         /* Tech error text */
  --text-danger: #dc2626 !important;        /* Tech danger text */

  /* ===== BACKGROUND COLORS ===== */
  --bg-primary: #ffffff !important;          /* Primary background (white) */
  --bg-secondary: #f9fafb !important;       /* Modern light background */
  --bg-tertiary: #f3f4f6 !important;        /* Tech tertiary background */
  --bg-subtle: #f8fafc !important;          /* Subtle tech background */
  --bg-light: #e5e7eb !important;           /* Modern light background */
  --bg-dark: #1f2937 !important;            /* Modern dark background */
  --bg-overlay: rgba(31, 41, 55, 0.8) !important; /* Modern dark overlay */
  --bg-overlay-light: rgba(255, 255, 255, 0.9) !important; /* Light overlay */

  /* ===== BORDER COLORS ===== */
  --border-primary: #d1d5db !important;     /* Modern border color */
  --border-secondary: #e5e7eb !important;   /* Light border color */
  --border-light: #f3f4f6 !important;       /* Very light border */
  --border-subtle: #f9fafb !important;      /* Subtle border */
  --border-muted: #9ca3af !important;       /* Muted border */
  --border-dark: #6b7280 !important;        /* Dark border */

  /* ===== STATE COLORS ===== */
  --success: #10b981 !important;            /* Modern success color */
  --success-light: #34d399 !important;     /* Light success */
  --info: #0ea5e9 !important;              /* Modern info color (blue) */
  --warning: #f59e0b !important;           /* Modern warning color */
  --warning-light: #fbbf24 !important;    /* Light warning */
  --warning-bg: #fef3c7 !important;       /* Warning background */
  --warning-border: #f59e0b !important;   /* Warning border */
  --error: #ef4444 !important;             /* Modern error color */
  --danger: #dc2626 !important;            /* Modern danger color */

  /* ===== RATING/STAR COLORS ===== */
  --star-active: #eab308 !important;       /* Modern yellow star */
  --star-gold: #f59e0b !important;         /* Tech gold star */
  --star-inactive: #e5e7eb !important;     /* Modern inactive star */

  /* ===== BUTTON COLORS ===== */
  --btn-primary-bg: #0066cc !important;         /* Tech blue primary button */
  --btn-primary-hover: #0052a3 !important;      /* Tech blue hover */
  --btn-secondary-bg: #f3f4f6 !important;       /* Modern secondary button */
  --btn-secondary-hover: #e5e7eb !important;    /* Modern secondary hover */
  --btn-success-bg: #10b981 !important;         /* Tech success button */
  --btn-danger-bg: #ef4444 !important;          /* Tech danger button */
  --btn-outline: #d1d5db !important;            /* Modern outline button */

  /* ===== CARD/COMPONENT COLORS ===== */
  --card-bg: #ffffff !important;              /* Card background */
  --card-border: #e5e7eb !important;         /* Modern card border */
  --card-shadow: rgba(0, 0, 0, 0.1) !important; /* Card shadow */
  --card-hover-shadow: rgba(0, 0, 0, 0.15) !important; /* Card hover shadow */

  /* ===== NAVIGATION COLORS ===== */
  --nav-bg: #ffffff !important;              /* Navigation background */
  --nav-border: #e5e7eb !important;         /* Modern navigation border */
  --nav-link: #0066cc !important;           /* Tech blue navigation links */
  --nav-link-hover: #00d4ff !important;     /* Cyan hover for links */
  --nav-text: #1f2937 !important;           /* Modern navigation text */

  /* ===== SCROLLBAR COLORS ===== */
  --scrollbar-track: #f9fafb !important;    /* Modern scrollbar track */
  --scrollbar-thumb: #9ca3af !important;    /* Modern scrollbar thumb */
  --scrollbar-thumb-hover: #6b7280 !important; /* Modern scrollbar hover */

  /* ===== FORM COLORS ===== */
  --form-input-bg: #ffffff !important;      /* Form input background */
  --form-input-border: #d1d5db !important;  /* Modern form border */
  --form-input-focus: #0066cc !important;   /* Tech blue focus */
  --form-input-error: #ef4444 !important;   /* Modern form error */

  /* ===== GRADIENTS ===== */
  --gradient-primary: linear-gradient(135deg, #0066cc, #0052a3) !important;
  --gradient-secondary: linear-gradient(135deg, #00d4ff 0%, #00b8e6 100%) !important;
  --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  --gradient-warning: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fbbf24 100%) !important;
  --gradient-overlay: linear-gradient(135deg, rgba(31,41,55,0.7) 0%, rgba(31,41,55,0.3) 100%) !important;
  --gradient-shimmer: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important;

  /* ===== SHADOW COLORS (RGBA VALUES FOR OPACITY) ===== */
  --shadow-light: rgba(0, 0, 0, 0.1) !important;
  --shadow-medium: rgba(0, 0, 0, 0.15) !important;
  --shadow-dark: rgba(0, 0, 0, 0.3) !important;
  --shadow-brand: rgba(0, 102, 204, 0.3) !important;
  --shadow-cyan: rgba(0, 212, 255, 0.4) !important;
  --shadow-success: rgba(16, 185, 129, 0.3) !important;
  --shadow-danger: rgba(239, 68, 68, 0.3) !important;

  /* ===== TRANSPARENT OVERLAYS ===== */
  --overlay-black-light: rgba(0, 0, 0, 0.3) !important;
  --overlay-black-medium: rgba(0, 0, 0, 0.6) !important;
  --overlay-black-dark: rgba(0, 0, 0, 0.8) !important;
  --overlay-black-darker: rgba(0, 0, 0, 0.95) !important;
  --overlay-white-light: rgba(255, 255, 255, 0.1) !important;
  --overlay-white-medium: rgba(255, 255, 255, 0.2) !important;
  --overlay-white-dark: rgba(255, 255, 255, 0.3) !important;
  --overlay-brand: rgba(0, 102, 204, 0.9) !important;
  --overlay-cyan: rgba(0, 212, 255, 0.2) !important;

  /* ===== SPECIFIC COMPONENT COLORS ===== */
  --badge-prime: #1f2937 !important;         /* Modern dark badge */
  --badge-deal: #dc2626 !important;          /* Tech red deal badge */
  --badge-new: #10b981 !important;           /* Tech green new badge */
  --badge-sale: #ef4444 !important;          /* Tech red sale badge */
  --price-current: #dc2626 !important;       /* Tech red price color */
  --price-original: #6b7280 !important;      /* Muted original price */
  --discount-bg: #dc2626 !important;         /* Tech red discount */

  /* ===== MOBILE/RESPONSIVE COLORS ===== */
  --mobile-nav-bg: #ffffff !important;       /* Mobile navigation background */
  --mobile-overlay: rgba(31, 41, 55, 0.5) !important; /* Modern mobile overlay */

  /* ===== LOADING/SKELETON COLORS ===== */
  --skeleton-bg: #f3f4f6 !important;         /* Modern skeleton background */
  --skeleton-shimmer: #e5e7eb !important;    /* Modern skeleton shimmer */

  /* ===== ACCESSIBILITY COLORS ===== */
  --focus-ring: rgba(0, 102, 204, 0.25) !important; /* Tech blue focus ring */
  --focus-border: #0066cc !important;         /* Tech blue focus border */

  /* ===== PRODUCT SPECIFIC COLORS ===== */
  --product-available: #10b981 !important;    /* Tech green available */
  --product-unavailable: #ef4444 !important;  /* Tech red unavailable */
  --product-limited: #f59e0b !important;      /* Tech orange limited stock */
}



/* ===== UTILITY CLASSES FOR QUICK ACCESS ===== */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--danger) !important; }
.text-info { color: var(--info) !important; }

.bg-primary { background-color: var(--bg-primary) !important; }
.bg-secondary { background-color: var(--bg-secondary) !important; }
.bg-success { background-color: var(--success) !important; }
.bg-warning { background-color: var(--warning) !important; }
.bg-danger { background-color: var(--danger) !important; }
.bg-info { background-color: var(--info) !important; }

.border-primary { border-color: var(--border-primary) !important; }
.border-secondary { border-color: var(--border-secondary) !important; }
.border-success { border-color: var(--success) !important; }
.border-warning { border-color: var(--warning) !important; }
.border-danger { border-color: var(--danger) !important; }
.border-info { border-color: var(--info) !important; }

/* ===== COMPONENT SPECIFIC CLASSES ===== */
.prime-badge {
  background: var(--badge-prime) !important;
  color: var(--text-light) !important;
  position: absolute !important;
  top: auto !important;
  bottom: 10px !important;
  right: 10px !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}