/* PicknDine Warm Theme Color Palette */
:root {
  /* Brand color palette */
  --pd-primary: #F26F3F; /* Main brand color from logo (orange) */
  --pd-primary-light: #F7916A; /* Lighter orange */
  --pd-primary-dark: #DD5927; /* Darker orange */
  --pd-secondary: #1E544C; /* Dark teal from logo text */
  --pd-secondary-light: #2C6F65; /* Lighter teal */
  --pd-secondary-dark: #15403A; /* Darker teal */
  
  /* Warm neutrals palette */
  --pd-background: #F3ECE3; /* Cream paper-like background */
  --pd-surface: #FFFFFF; /* Pure white */
  --pd-surface-alt: #F9F5F0; /* Slightly off-white for cards */
  --pd-surface-warm: #F5E6D8; /* Warm beige for alternate surfaces */
  
  /* Text colors */
  --pd-text: #2E2E2E; /* Almost black */
  --pd-text-light: #545454; /* Dark grey for secondary text */
  --pd-text-lighter: #777777; /* Medium grey for tertiary text */
  --pd-text-inverse: #FFFFFF; /* White text for dark backgrounds */
  
  /* Accent colors */
  --pd-terracotta: #E08F62; /* Terracotta */
  --pd-terracotta-light: #F3C7A1; /* Light terracotta */
  --pd-soft-red: #FC766A; /* Soft red for errors/alerts */
  --pd-sage: #B1C6B3; /* Sage green */
  --pd-mint: #88B6A3; /* Mint green for success states */
  --pd-yellow: #F9C97B; /* Warm yellow for ratings */
  
  /* Shadow colors */
  --pd-shadow-sm: 0 2px 4px rgba(177, 134, 95, 0.1);
  --pd-shadow-md: 0 4px 8px rgba(177, 134, 95, 0.15);
  --pd-shadow-lg: 0 8px 16px rgba(177, 134, 95, 0.2);
  
  /* Override Tailwind default colors */
  --color-white: var(--pd-text);
  --color-indigo-50: var(--pd-surface-alt);
  --color-indigo-100: var(--pd-surface-warm);
  --color-indigo-600: var(--pd-primary);
  --color-indigo-700: var(--pd-primary-light);
  --color-indigo-800: var(--pd-primary-dark);
  --color-gray-200: var(--pd-surface-warm);
  --color-gray-500: var(--pd-text-lighter);
  --color-gray-600: var(--pd-text-light);
  --color-gray-700: var(--pd-text);
  --color-gray-800: var(--pd-text);
  --color-green-50: rgba(136, 182, 163, 0.2);
  --color-green-100: rgba(136, 182, 163, 0.3);
  --color-green-600: var(--pd-mint);
  --color-green-700: var(--pd-sage);
  --color-green-800: var(--pd-secondary-light);
}

/* Root element styles for better defaults */
html, body {
  background-color: var(--pd-background);
  color: var(--pd-text);
  font-family: 'Poppins', 'Quicksand', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Background Colors */
.bg-base { background-color: var(--pd-background) !important; }
.bg-mantle { background-color: var(--pd-surface-warm) !important; }
.bg-crust { background-color: var(--pd-surface-alt) !important; }
.bg-surface0 { background-color: var(--pd-surface) !important; }
.bg-surface1 { background-color: var(--pd-surface-alt) !important; }
.bg-surface2 { background-color: var(--pd-surface-warm) !important; }
.bg-mauve { background-color: var(--pd-primary) !important; }
.bg-lavender { background-color: var(--pd-primary-light) !important; }
.bg-blue { background-color: var(--pd-secondary) !important; }
.bg-sapphire { background-color: var(--pd-secondary-light) !important; }
.bg-sky { background-color: var(--pd-terracotta) !important; }
.bg-teal { background-color: var(--pd-terracotta-light) !important; }
.bg-green { background-color: var(--pd-mint) !important; }
.bg-yellow { background-color: var(--pd-yellow) !important; }
.bg-peach { background-color: var(--pd-terracotta) !important; }
.bg-maroon { background-color: var(--pd-terracotta-light) !important; }
.bg-red { background-color: var(--pd-soft-red) !important; }
.bg-pink { background-color: var(--pd-primary-light) !important; }
.bg-flamingo { background-color: var(--pd-primary) !important; }
.bg-rosewater { background-color: var(--pd-terracotta-light) !important; }

/* Text Colors */
.text-text { color: var(--pd-text) !important; }
.text-subtext1 { color: var(--pd-text-light) !important; }
.text-subtext0 { color: var(--pd-text-lighter) !important; }
.text-overlay2 { color: var(--pd-text-light) !important; }
.text-overlay1 { color: var(--pd-text-lighter) !important; }
.text-overlay0 { color: var(--pd-text-lighter) !important; }
.text-surface2 { color: var(--pd-text-lighter) !important; }
.text-surface1 { color: var(--pd-text-light) !important; }
.text-mauve { color: var(--pd-primary) !important; }
.text-lavender { color: var(--pd-primary-dark) !important; }
.text-blue { color: var(--pd-secondary) !important; }
.text-sapphire { color: var(--pd-secondary-light) !important; }
.text-sky { color: var(--pd-terracotta) !important; }
.text-teal { color: var(--pd-terracotta-light) !important; }
.text-green { color: var(--pd-mint) !important; }
.text-yellow { color: var(--pd-yellow) !important; }
.text-peach { color: var(--pd-terracotta) !important; }
.text-maroon { color: var(--pd-terracotta-light) !important; }
.text-red { color: var(--pd-soft-red) !important; }
.text-pink { color: var(--pd-primary-light) !important; }
.text-flamingo { color: var(--pd-primary) !important; }
.text-rosewater { color: var(--pd-terracotta-light) !important; }

/* Border Colors */
.border-surface2 { border-color: rgba(226, 143, 98, 0.2) !important; }
.border-mauve { border-color: var(--pd-primary) !important; }
.border-lavender { border-color: var(--pd-primary-light) !important; }
.border-blue { border-color: var(--pd-secondary) !important; }
.border-green { border-color: var(--pd-mint) !important; }
.border-red { border-color: var(--pd-soft-red) !important; }

/* Hover Colors */
.hover\:bg-surface1:hover { background-color: var(--pd-surface-alt) !important; }
.hover\:bg-surface2:hover { background-color: var(--pd-surface-warm) !important; }
.hover\:bg-mauve:hover { background-color: var(--pd-primary) !important; }
.hover\:bg-lavender:hover { background-color: var(--pd-primary-light) !important; }
.hover\:bg-maroon:hover { background-color: var(--pd-terracotta-light) !important; }
.hover\:bg-teal:hover { background-color: var(--pd-terracotta) !important; }
.hover\:text-mauve:hover { color: var(--pd-primary) !important; }
.hover\:text-lavender:hover { color: var(--pd-primary-light) !important; }
.hover\:text-teal:hover { color: var(--pd-terracotta) !important; }

/* Opacity Variants */
.bg-mauve\/20 { background-color: rgba(242, 111, 63, 0.2) !important; }
.bg-green\/20 { background-color: rgba(136, 182, 163, 0.2) !important; }
.bg-surface0\/50 { background-color: rgba(255, 255, 255, 0.5) !important; }
.bg-lavender\/20 { background-color: rgba(247, 145, 106, 0.2) !important; }
.bg-green\/10 { background-color: rgba(136, 182, 163, 0.1) !important; }
.bg-red\/10 { background-color: rgba(252, 118, 106, 0.1) !important; }
.bg-blue\/20 { background-color: rgba(30, 84, 76, 0.2) !important; }

/* Component Styles */
.btn {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition-property: color, background-color, border-color, transform, box-shadow;
  transition-duration: 300ms;
  display: inline-block;
  text-align: center;
  box-shadow: var(--pd-shadow-sm);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--pd-shadow-md);
}

.btn-primary {
  background-color: var(--pd-primary);
  color: var(--pd-text-inverse);
}
.btn-primary:hover {
  background-color: var(--pd-primary-dark);
}

.btn-secondary {
  background-color: var(--pd-secondary);
  color: var(--pd-text-inverse);
}
.btn-secondary:hover {
  background-color: var(--pd-secondary-dark);
}

.btn-outline {
  border: 1px solid var(--pd-primary);
  color: var(--pd-primary);
  background-color: transparent;
}
.btn-outline:hover {
  background-color: rgba(242, 111, 63, 0.1);
  color: var(--pd-primary-dark);
}

.btn-danger {
  background-color: var(--pd-soft-red);
  color: var(--pd-text-inverse);
}
.btn-danger:hover {
  background-color: #e05e52;
}

.btn-success {
  background-color: var(--pd-mint);
  color: var(--pd-text-inverse);
}
.btn-success:hover {
  background-color: #76a090;
}

.card {
  background-color: var(--pd-surface);
  border-radius: 0.75rem;
  box-shadow: var(--pd-shadow-sm);
  overflow: hidden;
  transition: all 300ms;
  border: 1px solid rgba(226, 143, 98, 0.1);
}
.card:hover {
  box-shadow: var(--pd-shadow-md);
  transform: translateY(-2px);
}

.card-content {
  padding: 1.5rem;
}

.input {
  width: 100%;
  padding: 0.625rem;
  border: 1px solid rgba(226, 143, 98, 0.3);
  border-radius: 0.5rem;
  background-color: var(--pd-surface);
  color: var(--pd-text);
  transition: all 200ms;
}
.input:focus {
  border-color: var(--pd-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(242, 111, 63, 0.2);
}

.select {
  padding: 0.625rem;
  border: 1px solid rgba(226, 143, 98, 0.3);
  border-radius: 0.5rem;
  background-color: var(--pd-surface);
  color: var(--pd-text);
  transition: all 200ms;
}
.select:focus {
  border-color: var(--pd-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(242, 111, 63, 0.2);
}

.tag {
  background-color: var(--pd-surface-warm);
  color: var(--pd-text);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  display: inline-block;
  font-weight: 500;
}

.tag-primary {
  background-color: rgba(30, 84, 76, 0.15);
  color: var(--pd-secondary);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  display: inline-block;
  font-weight: 500;
}

.tag-success {
  background-color: rgba(136, 182, 163, 0.2);
  color: var(--pd-secondary);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  display: inline-block;
  font-weight: 500;
}

.tag-warning {
  background-color: rgba(249, 201, 123, 0.3);
  color: #9B6E2E;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  display: inline-block;
  font-weight: 500;
}

.alert-success {
  background-color: rgba(136, 182, 163, 0.2);
  border-left: 4px solid var(--pd-mint);
  color: var(--pd-secondary);
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 0.5rem;
}

.alert-error {
  background-color: rgba(252, 118, 106, 0.1);
  border-left: 4px solid var(--pd-soft-red);
  color: var(--pd-soft-red);
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 0.5rem;
}

.alert-info {
  background-color: rgba(136, 182, 163, 0.1);
  border-left: 4px solid var(--pd-terracotta);
  color: var(--pd-secondary);
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 0.5rem;
}

.avatar {
  width: 4rem;
  height: 4rem;
  background-color: rgba(242, 111, 63, 0.2);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--pd-primary);
  border: 2px solid var(--pd-primary-light);
}

.stat-card {
  background-color: var(--pd-surface-alt);
  padding: 1.25rem;
  border-radius: 0.75rem;
  box-shadow: var(--pd-shadow-sm);
  border: 1px solid rgba(226, 143, 98, 0.1);
  transition: all 300ms;
}
.stat-card:hover {
  box-shadow: var(--pd-shadow-md);
  transform: translateY(-2px);
}

.stat-card-primary {
  background-color: rgba(242, 111, 63, 0.1);
  padding: 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(242, 111, 63, 0.2);
  box-shadow: var(--pd-shadow-sm);
  transition: all 300ms;
}
.stat-card-primary:hover {
  box-shadow: var(--pd-shadow-md);
  transform: translateY(-2px);
}

.stat-card-success {
  background-color: rgba(136, 182, 163, 0.1);
  padding: 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(136, 182, 163, 0.2);
  box-shadow: var(--pd-shadow-sm);
  transition: all 300ms;
}
.stat-card-success:hover {
  box-shadow: var(--pd-shadow-md);
  transform: translateY(-2px);
}

/* Common Tailwind overrides */
.bg-white {
  background-color: var(--pd-surface) !important;
}

.bg-gray-50 {
  background-color: var(--pd-background) !important;
}

.text-gray-600, .text-gray-700, .text-gray-800 {
  color: var(--pd-text) !important;
}

.text-white {
  color: var(--pd-text-inverse) !important;
}

.text-indigo-600 {
  color: var(--pd-primary) !important;
}

.hover\:text-indigo-800:hover {
  color: var(--pd-primary-dark) !important;
}

.hover\:bg-indigo-700:hover {
  background-color: var(--pd-primary-light) !important;
}

.bg-indigo-600 {
  background-color: var(--pd-primary) !important;
}

.border-t {
  border-top-color: rgba(226, 143, 98, 0.2) !important;
}

/* Enhance transitioning for hover effects */
a, button, .btn, .card {
  transition: all 0.3s ease-in-out;
}

/* Better form control styling */
input[type="text"], 
input[type="email"], 
input[type="password"],
input[type="search"],
input[type="date"],
textarea, 
select {
  background-color: var(--pd-surface);
  color: var(--pd-text);
  border: 1px solid rgba(226, 143, 98, 0.3);
  border-radius: 0.5rem;
  padding: 0.625rem;
  transition: all 200ms;
}

input[type="text"]:focus, 
input[type="email"]:focus, 
input[type="password"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
textarea:focus, 
select:focus {
  border-color: var(--pd-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(242, 111, 63, 0.2);
}

::placeholder {
  color: var(--pd-text-lighter);
  opacity: 0.7;
}

/* Star ratings */
.text-yellow-500, .text-yellow {
  color: var(--pd-yellow) !important;
}

.text-gray-300 {
  color: var(--pd-text-lighter) !important;
}

/* Custom gradient backgrounds */
.bg-gradient-warm {
  background: linear-gradient(135deg, var(--pd-background) 0%, var(--pd-surface-warm) 100%);
}

.bg-gradient-primary {
  background: linear-gradient(135deg, var(--pd-primary-light) 0%, var(--pd-primary) 100%);
}

.bg-gradient-secondary {
  background: linear-gradient(135deg, var(--pd-secondary-light) 0%, var(--pd-secondary) 100%);
}

/* Custom shadows */
.shadow-warm-sm {
  box-shadow: var(--pd-shadow-sm);
}

.shadow-warm-md {
  box-shadow: var(--pd-shadow-md);
}

.shadow-warm-lg {
  box-shadow: var(--pd-shadow-lg);
}

/* Add rounded corners to elements */
.rounded-warm {
  border-radius: 0.75rem;
}

.rounded-warm-lg {
  border-radius: 1rem;
}

/* Custom font styles */
.font-poppins {
  font-family: 'Poppins', system-ui, sans-serif;
}

.font-quicksand {
  font-family: 'Quicksand', system-ui, sans-serif;
}

/* Responsive utilities and mobile improvements */
.touch-manipulation {
  touch-action: manipulation;
}

/* Improved mobile button sizes (minimum 44px for touch targets) */
@media (max-width: 640px) {
  .btn {
    min-height: 44px;
    padding: 0.75rem 1rem;
  }
  
  .input, .select {
    min-height: 44px;
    padding: 0.75rem;
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  /* Better mobile card spacing */
  .card-content {
    padding: 1rem;
  }
  
  /* Improved text readability on mobile */
  .text-xs {
    font-size: 0.8rem;
  }
  
  .text-sm {
    font-size: 0.9rem;
  }
}

/* Improved hover states for touch devices */
@media (hover: none) {
  .hover\:scale-\[1\.02\]:hover,
  .hover\:scale-\[1\.03\]:hover,
  .card:hover {
    transform: none;
  }
}

/* Safe area for devices with notches */
@supports (padding: max(0px)) {
  .safe-area-inset-top {
    padding-top: max(1rem, env(safe-area-inset-top));
  }
  
  .safe-area-inset-bottom {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

/* Better focus states for accessibility */
.btn:focus,
.input:focus,
.select:focus {
  outline: 2px solid var(--pd-primary);
  outline-offset: 2px;
}

/* Grid improvements for very small screens */
@media (max-width: 320px) {
  .grid-cols-1 {
    gap: 0.75rem;
  }
  
  .px-4 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}