/* A & A Afrogems - Mobile-First Premium Theme */

:root {
  /* African-Inspired Color Palette */
  --color-forest-primary: #0F4C3A;      /* Deep forest green - primary brand */
  --color-forest-secondary: #1A5D47;     /* Lighter forest green */
  --color-earth-warm: #8B4513;           /* Warm earth brown */
  --color-earth-light: #D2B48C;          /* Light earth/sand */
  --color-gold-accent: #D4AF37;          /* African gold */
  --color-gold-light: #F4E4BC;           /* Light gold */
  
  /* Neutral Foundation */
  --color-stone-50: #FAFAF9;             /* Lightest stone */
  --color-stone-100: #F5F5F4;            /* Light stone */
  --color-stone-200: #E7E5E4;            /* Medium light stone */
  --color-stone-300: #D6D3D1;            /* Medium stone */
  --color-stone-500: #78716C;            /* Medium dark stone */
  --color-stone-600: #57534E;            /* Dark stone */
  --color-stone-800: #292524;            /* Very dark stone */
  --color-stone-900: #1C1917;            /* Darkest stone */
  
  /* Status Colors */
  --color-success: #059669;              /* Available status */
  --color-warning: #D97706;              /* Reserved status */
  --color-error: #DC2626;                /* Sold/error status */
  
  /* Typography */
  --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Spacing Scale (Mobile-First) */
  --space-1: 0.25rem;    /* 4px */
  --space-2: 0.5rem;     /* 8px */
  --space-3: 0.75rem;    /* 12px */
  --space-4: 1rem;       /* 16px */
  --space-5: 1.25rem;    /* 20px */
  --space-6: 1.5rem;     /* 24px */
  --space-8: 2rem;       /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  
  /* Border Radius */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  
  /* Touch Target Minimum */\n  --touch-target-min: 44px;\n}\n\n/* Reset and Base Styles */\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nhtml {\n  font-size: 16px;\n  line-height: 1.5;\n  -webkit-text-size-adjust: 100%;\n  -ms-text-size-adjust: 100%;\n}\n\nbody {\n  font-family: var(--font-family-primary);\n  font-weight: var(--font-weight-regular);\n  color: var(--color-stone-800);\n  background-color: var(--color-stone-50);\n  line-height: 1.6;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n/* Mobile-First Typography Scale */\nh1 {\n  font-size: 1.875rem; /* 30px */\n  font-weight: var(--font-weight-bold);\n  line-height: 1.2;\n  color: var(--color-forest-primary);\n  margin-bottom: var(--space-6);\n}\n\nh2 {\n  font-size: 1.5rem; /* 24px */\n  font-weight: var(--font-weight-semibold);\n  line-height: 1.3;\n  color: var(--color-forest-primary);\n  margin-bottom: var(--space-4);\n}\n\nh3 {\n  font-size: 1.25rem; /* 20px */\n  font-weight: var(--font-weight-semibold);\n  line-height: 1.4;\n  color: var(--color-stone-800);\n  margin-bottom: var(--space-3);\n}\n\np {\n  margin-bottom: var(--space-4);\n  color: var(--color-stone-600);\n}\n\n/* Mobile-Optimized Button System */\n.btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: var(--touch-target-min);\n  padding: var(--space-3) var(--space-6);\n  font-family: var(--font-family-primary);\n  font-weight: var(--font-weight-medium);\n  font-size: 0.875rem;\n  line-height: 1;\n  border: none;\n  border-radius: var(--radius-md);\n  cursor: pointer;\n  text-decoration: none;\n  transition: all 0.2s ease-in-out;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.btn:focus {\n  outline: 2px solid var(--color-gold-accent);\n  outline-offset: 2px;\n}\n\n.btn-primary {\n  background-color: var(--color-forest-primary);\n  color: white;\n}\n\n.btn-primary:hover, .btn-primary:active {\n  background-color: var(--color-forest-secondary);\n  transform: translateY(-1px);\n  box-shadow: var(--shadow-md);\n}\n\n.btn-secondary {\n  background-color: transparent;\n  color: var(--color-forest-primary);\n  border: 1px solid var(--color-stone-300);\n}\n\n.btn-secondary:hover, .btn-secondary:active {\n  background-color: var(--color-stone-100);\n  border-color: var(--color-forest-primary);\n}\n\n.btn-gold {\n  background-color: var(--color-gold-accent);\n  color: var(--color-stone-900);\n}\n\n.btn-gold:hover, .btn-gold:active {\n  background-color: #B8941F;\n  transform: translateY(-1px);\n}\n\n.btn-full {\n  width: 100%;\n}\n\n.btn-large {\n  min-height: 52px;\n  padding: var(--space-4) var(--space-8);\n  font-size: 1rem;\n}\n\n/* Card System for Gemstone Tiles */\n.card {\n  background-color: white;\n  border-radius: var(--radius-lg);\n  box-shadow: var(--shadow-sm);\n  overflow: hidden;\n  transition: all 0.3s ease;\n}\n\n.card:hover {\n  box-shadow: var(--shadow-lg);\n  transform: translateY(-2px);\n}\n\n.card-header {\n  position: relative;\n  overflow: hidden;\n}\n\n.card-image {\n  width: 100%;\n  height: 200px;\n  object-fit: cover;\n  display: block;\n}\n\n.card-body {\n  padding: var(--space-4);\n}\n\n.card-footer {\n  padding: var(--space-4);\n  background-color: var(--color-stone-50);\n  border-top: 1px solid var(--color-stone-200);\n}\n\n/* Status Badge System */\n.badge {\n  display: inline-flex;\n  align-items: center;\n  padding: var(--space-1) var(--space-3);\n  font-size: 0.75rem;\n  font-weight: var(--font-weight-medium);\n  border-radius: var(--radius-sm);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n.badge-available {\n  background-color: #DCFCE7;\n  color: var(--color-success);\n}\n\n.badge-reserved {\n  background-color: #FEF3C7;\n  color: var(--color-warning);\n}\n\n.badge-sold {\n  background-color: #FEE2E2;\n  color: var(--color-error);\n}\n\n/* Layout System */\n.container {\n  width: 100%;\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 0 var(--space-4);\n}\n\n.grid {\n  display: grid;\n  gap: var(--space-4);\n}\n\n.grid-cols-1 {\n  grid-template-columns: 1fr;\n}\n\n.grid-cols-2 {\n  grid-template-columns: repeat(2, 1fr);\n}\n\n/* Mobile-First Responsive Grid */\n@media (min-width: 480px) {\n  .sm\\:grid-cols-2 {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n@media (min-width: 768px) {\n  .md\\:grid-cols-3 {\n    grid-template-columns: repeat(3, 1fr);\n  }\n  \n  .container {\n    padding: 0 var(--space-6);\n  }\n}\n\n@media (min-width: 1024px) {\n  .lg\\:grid-cols-4 {\n    grid-template-columns: repeat(4, 1fr);\n  }\n}\n\n/* Navigation */\n.navbar {\n  background-color: white;\n  border-bottom: 1px solid var(--color-stone-200);\n  position: sticky;\n  top: 0;\n  z-index: 50;\n  backdrop-filter: blur(8px);\n}\n\n.navbar-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 64px;\n  padding: 0 var(--space-4);\n}\n\n.navbar-brand {\n  font-size: 1.25rem;\n  font-weight: var(--font-weight-bold);\n  color: var(--color-forest-primary);\n  text-decoration: none;\n}\n\n.navbar-actions {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n}\n\n/* Bottom Navigation for Mobile */\n.bottom-nav {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: white;\n  border-top: 1px solid var(--color-stone-200);\n  padding: var(--space-2) 0;\n  z-index: 50;\n}\n\n.bottom-nav-content {\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  max-width: 480px;\n  margin: 0 auto;\n}\n\n.bottom-nav-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: var(--space-2);\n  color: var(--color-stone-500);\n  text-decoration: none;\n  font-size: 0.75rem;\n  min-width: var(--touch-target-min);\n  transition: color 0.2s ease;\n}\n\n.bottom-nav-item.active {\n  color: var(--color-forest-primary);\n}\n\n.bottom-nav-item i {\n  font-size: 1.25rem;\n  margin-bottom: var(--space-1);\n}\n\n/* Utility Classes */\n.text-center {\n  text-align: center;\n}\n\n.text-right {\n  text-align: right;\n}\n\n.font-bold {\n  font-weight: var(--font-weight-bold);\n}\n\n.font-semibold {\n  font-weight: var(--font-weight-semibold);\n}\n\n.text-forest {\n  color: var(--color-forest-primary);\n}\n\n.text-gold {\n  color: var(--color-gold-accent);\n}\n\n.text-stone-600 {\n  color: var(--color-stone-600);\n}\n\n.bg-white {\n  background-color: white;\n}\n\n.rounded {\n  border-radius: var(--radius-md);\n}\n\n.shadow {\n  box-shadow: var(--shadow-md);\n}\n\n.mb-4 {\n  margin-bottom: var(--space-4);\n}\n\n.mt-4 {\n  margin-top: var(--space-4);\n}\n\n.p-4 {\n  padding: var(--space-4);\n}\n\n/* Hide elements on mobile/desktop */\n.hidden-mobile {\n  display: none;\n}\n\n@media (min-width: 768px) {\n  .hidden-mobile {\n    display: block;\n  }\n  \n  .hidden-desktop {\n    display: none;\n  }\n  \n  .bottom-nav {\n    display: none;\n  }\n}\n\n/* Animation Utilities */\n.fade-in {\n  animation: fadeIn 0.3s ease-in-out;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.pulse {\n  animation: pulse 2s infinite;\n}\n\n@keyframes pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n/* Loading States */\n.skeleton {\n  background: linear-gradient(\n    90deg,\n    var(--color-stone-200) 25%,\n    var(--color-stone-300) 50%,\n    var(--color-stone-200) 75%\n  );\n  background-size: 200% 100%;\n  animation: shimmer 1.5s infinite;\n}\n\n@keyframes shimmer {\n  0% {\n    background-position: -200% 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\n}\n\n/* Safe Area for Mobile Devices */\n.safe-area-bottom {\n  padding-bottom: env(safe-area-inset-bottom);\n}\n\n.safe-area-top {\n  padding-top: env(safe-area-inset-top);\n}\n\n/* Focus Styles for Accessibility */\n*:focus {\n  outline: 2px solid var(--color-gold-accent);\n  outline-offset: 2px;\n}\n\n/* High Contrast Mode Support */\n@media (prefers-contrast: high) {\n  :root {\n    --color-forest-primary: #000000;\n    --color-stone-600: #000000;\n  }\n}\n\n/* Reduced Motion Support */\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}