/**
 * MyShopping Theme System
 * Centralized CSS variables for easy customization per tenant
 * 
 * Usage: Override --color-primary-* in tenant-specific CSS or inline style
 * Example: <div style="--color-primary: 234 88 12;"> for orange theme
 */

:root {
  /* Primary Color (Tenant customizable) */
  --color-primary: 37 99 235; /* blue-600 */
  --color-primary-light: 96 165 250; /* blue-400 */
  --color-primary-dark: 29 78 216; /* blue-700 */
  --color-primary-50: 239 246 255; /* blue-50 */
  --color-primary-100: 219 234 254; /* blue-100 */

  /* Secondary (Services - Green) */
  --color-secondary: 16 185 129; /* green-500 */
  --color-secondary-light: 52 211 153; /* green-400 */
  --color-secondary-dark: 5 150 105; /* green-600 */
  --color-secondary-50: 236 253 245; /* green-50 */

  /* Accent (Menu/Food - Orange) */
  --color-accent: 249 115 22; /* orange-500 */
  --color-accent-light: 251 146 60; /* orange-400 */
  --color-accent-dark: 234 88 12; /* orange-600 */
  --color-accent-50: 255 247 237; /* orange-50 */

  /* Semantic Colors */
  --color-success: 34 197 94; /* green-500 */
  --color-warning: 245 158 11; /* amber-500 */
  --color-error: 239 68 68; /* red-500 */
  --color-info: 59 130 246; /* blue-500 */

  /* Surface & Background */
  --color-surface: 255 255 255; /* white */
  --color-surface-elevated: 255 255 255;
  --color-background: 248 250 252; /* slate-50 */
  --color-background-subtle: 241 245 249; /* slate-100 */

  /* Text Colors */
  --color-text: 15 23 42; /* slate-900 */
  --color-text-secondary: 71 85 105; /* slate-600 */
  --color-text-muted: 148 163 184; /* slate-400 */
  --color-text-inverse: 255 255 255; /* white */

  /* Border Colors */
  --color-border: 226 232 240; /* slate-200 */
  --color-border-light: 241 245 249; /* slate-100 */
  --color-border-focus: var(--color-primary);

  /* 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);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-primary: 0 4px 14px 0 rgb(var(--color-primary) / 0.3);

  /* Animation */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Spacing Scale (for consistency) */
  --space-xs: 0.25rem; /* 4px */
  --space-sm: 0.5rem; /* 8px */
  --space-md: 1rem; /* 16px */
  --space-lg: 1.5rem; /* 24px */
  --space-xl: 2rem; /* 32px */
  --space-2xl: 3rem; /* 48px */

  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;
}

/* Dark Mode */
[data-theme="dark"],
.dark {
  --color-surface: 30 41 59; /* slate-800 */
  --color-surface-elevated: 51 65 85; /* slate-700 */
  --color-background: 15 23 42; /* slate-900 */
  --color-background-subtle: 30 41 59; /* slate-800 */

  --color-text: 248 250 252; /* slate-50 */
  --color-text-secondary: 203 213 225; /* slate-300 */
  --color-text-muted: 148 163 184; /* slate-400 */

  --color-border: 51 65 85; /* slate-700 */
  --color-border-light: 71 85 105; /* slate-600 */
}

/* ==========================================
   UTILITY CLASSES
   ========================================== */

/* Primary Color Utilities */
.bg-theme-primary {
  background-color: rgb(var(--color-primary));
}
.bg-theme-primary-light {
  background-color: rgb(var(--color-primary-50));
}
.text-theme-primary {
  color: rgb(var(--color-primary));
}
.border-theme-primary {
  border-color: rgb(var(--color-primary));
}
.ring-theme-primary {
  --tw-ring-color: rgb(var(--color-primary) / 0.5);
}
.shadow-theme-primary {
  box-shadow: var(--shadow-primary);
}

/* Hover variants */
.hover\:bg-theme-primary-dark:hover {
  background-color: rgb(var(--color-primary-dark));
}

/* Surface Utilities */
.bg-theme-surface {
  background-color: rgb(var(--color-surface));
}
.bg-theme-background {
  background-color: rgb(var(--color-background));
}

/* Text Utilities */
.text-theme {
  color: rgb(var(--color-text));
}
.text-theme-secondary {
  color: rgb(var(--color-text-secondary));
}
.text-theme-muted {
  color: rgb(var(--color-text-muted));
}

/* ==========================================
   COMPONENT STYLES
   ========================================== */

/* Button Primary */
.btn-primary {
  background-color: rgb(var(--color-primary));
  color: rgb(var(--color-text-inverse));
  box-shadow: var(--shadow-primary);
  transition: all var(--transition-base);
}
.btn-primary:hover {
  background-color: rgb(var(--color-primary-dark));
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0);
}

/* Card */
.card-theme {
  background-color: rgb(var(--color-surface));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition-base),
    transform var(--transition-base);
}
.card-theme:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-2px);
}

/* ==========================================
   ANIMATIONS
   ========================================== */

/* Fade in from bottom */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.4s ease-out forwards;
}

/* Staggered children animation */
.stagger-children > * {
  opacity: 0;
  animation: fadeInUp 0.4s ease-out forwards;
}
.stagger-children > *:nth-child(1) {
  animation-delay: 0.05s;
}
.stagger-children > *:nth-child(2) {
  animation-delay: 0.1s;
}
.stagger-children > *:nth-child(3) {
  animation-delay: 0.15s;
}
.stagger-children > *:nth-child(4) {
  animation-delay: 0.2s;
}
.stagger-children > *:nth-child(5) {
  animation-delay: 0.25s;
}
.stagger-children > *:nth-child(6) {
  animation-delay: 0.3s;
}
.stagger-children > *:nth-child(7) {
  animation-delay: 0.35s;
}
.stagger-children > *:nth-child(8) {
  animation-delay: 0.4s;
}
.stagger-children > *:nth-child(9) {
  animation-delay: 0.45s;
}
.stagger-children > *:nth-child(10) {
  animation-delay: 0.5s;
}

/* Pulse animation for badges */
@keyframes badge-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

.animate-badge-pulse {
  animation: badge-pulse 0.3s ease-in-out;
}

/* Skeleton shimmer */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    rgb(var(--color-background-subtle)) 25%,
    rgb(var(--color-surface)) 50%,
    rgb(var(--color-background-subtle)) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

/* Scale on tap (mobile) */
@keyframes tap-scale {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
}

.tap-scale:active {
  animation: tap-scale 0.15s ease;
}

/* ==========================================
   TOAST NOTIFICATIONS
   ========================================== */

.toast-container {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-lg);
  font-weight: 500;
  font-size: 0.875rem;
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: toastIn 0.3s ease-out forwards;
}

.toast-success {
  background-color: rgb(var(--color-success));
  color: white;
}

.toast-error {
  background-color: rgb(var(--color-error));
  color: white;
}

.toast-info {
  background-color: rgb(var(--color-info));
  color: white;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toastOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

.toast-exit {
  animation: toastOut 0.2s ease-in forwards;
}

/* ==========================================
   SMOOTH SCROLLING
   ========================================== */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .animate-fade-in-up,
  .stagger-children > *,
  .skeleton {
    animation: none;
    opacity: 1;
  }
}