@tailwind base;
@tailwind components;
@tailwind utilities;

/* Foodnfriends Design System - Modern Food-Tech UI */

@layer base {
  :root {
    /* Core Brand Colors */
    --background: 0 0% 100%;
    --foreground: 222 47% 11%;

    /* Brand Orange Palette - Rich & Vibrant - WCAG Compliant */
    --primary: 24 100% 35%;        /* #b24000 - Darker orange for WCAG AA compliance (4.7:1 contrast) */
    --primary-foreground: 0 0% 100%;
    --primary-light: 24 95% 55%;   /* Lighter orange for hover states */
    --primary-dark: 24 100% 32%;   /* Darker orange for pressed states */
    --primary-admin: 24 95% 45%;   /* Admin panel orange - darker for accessibility */
    --primary-admin-light: 24 100% 95%; /* Light admin orange backgrounds */

    /* Neutral Grays - Warmer tones to complement orange */
    --secondary: 30 8% 97%;         /* Warm light gray backgrounds */
    --secondary-foreground: 222 47% 11%;
    --muted: 30 10% 95%;            /* Warm card backgrounds */
    --muted-foreground: 222 13% 46%;

    /* Interactive Colors */
    --accent: 24 100% 96%;          /* Light orange backgrounds */
    --accent-foreground: 24 100% 25%; /* Darker text for WCAG AA compliance */
    --success: 142 76% 36%;         /* Success green */
    --success-foreground: 0 0% 100%;
    --warning: 43 96% 56%;          /* Warning yellow */
    --warning-foreground: 222 47% 11%;

    /* UI Elements */
    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;
    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;
    --border: 30 8% 88%;            /* Warmer border color */
    --input: 30 10% 95%;            /* Warmer input background */
    --ring: 24 100% 50%;            /* Orange focus ring */
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    /* Design Tokens */
    --radius: 0.75rem;
    --shadow-soft: 0 2px 8px -2px hsl(222 47% 11% / 0.08);
    --shadow-medium: 0 4px 16px -4px hsl(222 47% 11% / 0.12);
    --shadow-large: 0 8px 32px -8px hsl(222 47% 11% / 0.16);
    --shadow-elegant: 0 10px 40px -12px hsl(24 100% 50% / 0.25);
    
    /* Food-specific gradients */
    --gradient-hero: linear-gradient(135deg, hsl(24 100% 50%), hsl(24 100% 60%));
    --gradient-card: linear-gradient(145deg, hsl(0 0% 100%), hsl(30 10% 98%));
    --gradient-accent: linear-gradient(135deg, hsl(24 100% 96%), hsl(24 100% 92%));

    /* Animations */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Sidebar - Orange themed */
    --sidebar-background: 30 8% 98%;
    --sidebar-foreground: 222 47% 11%;
    --sidebar-primary: 24 100% 50%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 24 100% 96%;
    --sidebar-accent-foreground: 24 100% 25%;
    --sidebar-border: 30 8% 88%;
    --sidebar-ring: 24 100% 50%;
  }

  .dark {
    /* Dark background with warm undertones */
    --background: 222 47% 6%;
    --foreground: 30 8% 95%;

    /* Orange primary maintained in dark mode */
    --primary: 24 100% 50%;        /* Brighter orange for dark mode contrast */
    --primary-foreground: 222 47% 6%;
    --primary-light: 24 95% 60%;
    --primary-dark: 24 100% 40%;

    /* Warm dark UI elements */
    --card: 222 47% 8%;
    --card-foreground: 30 8% 95%;
    --popover: 222 47% 8%;
    --popover-foreground: 30 8% 95%;

    /* Warm secondary colors */
    --secondary: 222 47% 12%;
    --secondary-foreground: 30 8% 95%;
    --muted: 222 47% 10%;
    --muted-foreground: 30 8% 65%;

    /* Orange-tinted accent */
    --accent: 24 30% 15%;
    --accent-foreground: 24 100% 85%;

    /* Warm borders and inputs */
    --border: 222 47% 15%;
    --input: 222 47% 12%;
    --ring: 24 100% 55%;

    /* Other colors */
    --destructive: 0 75% 55%;
    --destructive-foreground: 30 8% 95%;
    --success: 142 70% 45%;
    --success-foreground: 30 8% 95%;
    --warning: 43 90% 60%;
    --warning-foreground: 222 47% 6%;

    /* Dark sidebar with orange theme */
    --sidebar-background: 222 47% 8%;
    --sidebar-foreground: 30 8% 90%;
    --sidebar-primary: 24 100% 50%;
    --sidebar-primary-foreground: 222 47% 6%;
    --sidebar-accent: 24 30% 15%;
    --sidebar-accent-foreground: 24 100% 80%; /* Better contrast */
    --sidebar-border: 222 47% 15%;
    --sidebar-ring: 24 100% 50%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-inter antialiased;
  }
}

/* Custom Component Styles */
@layer components {
  .hero-gradient {
    background: var(--gradient-hero);
  }
  
  .card-gradient {
    background: var(--gradient-card);
  }
  
  .accent-gradient {
    background: var(--gradient-accent);
  }

  /* Grid pattern */
  .bg-grid-pattern {
    background-image: 
      linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
  }
  
  .shadow-soft {
    box-shadow: var(--shadow-soft);
  }
  
  .shadow-medium {
    box-shadow: var(--shadow-medium);
  }
  
  .shadow-large {
    box-shadow: var(--shadow-large);
  }
  
  .shadow-elegant {
    box-shadow: var(--shadow-elegant);
  }

  .shadow-3xl {
    box-shadow: 0 35px 60px -12px hsl(var(--foreground) / 0.25);
  }

  /* Animations */
  @keyframes fade-in {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes gradient-x {
    0%, 100% {
      background-size: 200% 200%;
      background-position: left center;
    }
    50% {
      background-size: 200% 200%;
      background-position: right center;
    }
  }

  @keyframes bounce-subtle {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-4px);
    }
  }

  .animate-fade-in {
    animation: fade-in 0.6s ease-out forwards;
  }

  .animate-gradient-x {
    background-size: 200% 200%;
    animation: gradient-x 3s ease infinite;
  }

  .animate-bounce-subtle {
    animation: bounce-subtle 2s ease-in-out infinite;
  }
  
  .transition-smooth {
    transition: var(--transition-smooth);
  }
  
  .transition-bounce {
    transition: var(--transition-bounce);
  }
  
  /* Food Card Hover Effects */
  .food-card {
    @apply transition-smooth hover:shadow-medium hover:-translate-y-1;
  }
  
  .food-card:hover {
    transform: translateY(-4px);
  }
  
  /* Text gradient effects */
  .gradient-text {
    background: var(--gradient-hero);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Admin Layout Responsive Fixes */
  @media (max-width: 1023px) {
    .admin-content {
      width: 100% !important;
      overflow-x: hidden !important;
    }
    
    .admin-grid {
      grid-template-columns: 1fr !important;
      gap: 1rem !important;
    }
    
    .admin-stats-grid {
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    }

    .admin-tabs-list {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 0.25rem !important;
    }

    .admin-tabs-trigger {
      flex: 1 1 auto !important;
      min-width: fit-content !important;
      padding: 0.5rem 0.75rem !important;
      font-size: 0.875rem !important;
    }
  }

  @media (max-width: 640px) {
    .admin-content {
      padding: 1rem !important;
    }

    .admin-card {
      margin: 0 !important;
      border-radius: 0.75rem !important;
    }

    .admin-form-grid {
      grid-template-columns: 1fr !important;
      gap: 1rem !important;
    }

    .admin-button-group {
      flex-direction: column !important;
      gap: 0.5rem !important;
    }

    .admin-button-group button {
      width: 100% !important;
      justify-content: center !important;
    }

    .admin-tabs-list {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 0.25rem !important;
    }

    .admin-tabs-trigger {
      padding: 0.75rem 0.5rem !important;
      text-align: center !important;
    }

    .admin-tabs-trigger span {
      display: none !important;
    }

    .admin-tabs-trigger .lucide {
      margin: 0 auto !important;
    }
  }

  @media (max-width: 480px) {
    .admin-tabs-list {
      grid-template-columns: 1fr !important;
      max-height: 200px !important;
      overflow-y: auto !important;
    }
  }

  @media (min-width: 1024px) {
    .admin-grid-lg {
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
  }

  /* User Layout Responsive Fixes */
  @media (max-width: 768px) {
    .user-content {
      padding: 1rem !important;
    }

    .user-grid {
      grid-template-columns: 1fr !important;
      gap: 1rem !important;
    }

    .user-menu-grid {
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    }

    .user-cart-grid {
      grid-template-columns: 1fr !important;
    }

    .user-form-grid {
      grid-template-columns: 1fr !important;
      gap: 1rem !important;
    }

    .user-button-group {
      flex-direction: column !important;
      gap: 0.75rem !important;
    }

    .user-header-nav {
      flex-direction: column !important;
      gap: 1rem !important;
      align-items: stretch !important;
    }
  }

  @media (max-width: 640px) {
    .user-menu-grid {
      grid-template-columns: 1fr !important;
    }

    .user-menu-item {
      max-width: 100% !important;
    }

    .user-search-filters {
      flex-direction: column !important;
      gap: 1rem !important;
    }

    .user-category-filters {
      flex-wrap: wrap !important;
      justify-content: center !important;
    }
  }

  /* Ensure smooth transitions */
  .admin-transition {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Fix overflow issues in admin tables and cards */
  .admin-card {
    max-width: 100%;
    overflow: hidden;
  }

  .admin-table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  @media (max-width: 768px) {
    .admin-table-container {
      font-size: 0.875rem;
    }
  }

  /* Responsive breakpoint utilities */
  @media (max-width: 375px) {
    .xs\:hidden {
      display: none !important;
    }
  }

  @media (min-width: 376px) {
    .xs\:inline {
      display: inline !important;
    }
  }

  /* Shimmer animation for loading states */
  @keyframes shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }

  .animate-shimmer {
    animation: shimmer 1.5s ease-in-out infinite;
  }
}