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

/* ── Premium Brand Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Primary Brand */
  --red:        #e31e24;
  --red-dark:   #b91c1c;
  --red-light:  #fee2e2;
  
  /* Neutral Backgrounds */
  --cream:      #f5f0e8;
  --cream-dark: #ede8df;
  
  /* Dark Theme */
  --charcoal:   #1a1a1a;
  --charcoal-2: #222222;
  --charcoal-3: #2d2d2d;
  
  /* Accent */
  --gold:       #c9a84c;
  
  /* White */
  --white:      #ffffff;
  
  /* Premium Gray Scale (similar to Stripe) */
  --gray-50:    #f9fafb;
  --gray-100:   #f3f4f6;
  --gray-200:   #e5e7eb;
  --gray-300:   #d1d5db;
  --gray-400:   #9ca3af;
  --gray-500:   #6b7280;
  --gray-600:   #4b5563;
  --gray-700:   #374151;
  --gray-800:   #1f2937;
  --gray-900:   #111827;
  
  /* Premium Border Radius */
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  8px;
  --radius-xl:  12px;
  
  /* Premium 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 -2px 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);
  
  /* Transition Duration */
  --duration-100: 100ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
}

@layer base {
  html { 
    -webkit-text-size-adjust: 100%; 
    scroll-behavior: smooth;
    font-feature-settings: "rlig" 1, "calt" 1;
  }

  body {
    @apply bg-white text-gray-900 antialiased;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    line-height: 1.6;
    color-scheme: light dark;
  }

  /* Improved typography */
  h1, h2, h3, h4, h5, h6 {
    @apply font-black tracking-tight;
    line-height: 1.2;
  }
  
  h1 { @apply text-4xl sm:text-5xl md:text-6xl; }
  h2 { @apply text-3xl sm:text-4xl md:text-5xl; }
  h3 { @apply text-2xl sm:text-3xl md:text-4xl; }
  h4 { @apply text-xl sm:text-2xl md:text-3xl; }
  h5 { @apply text-lg sm:text-xl md:text-2xl; }
  h6 { @apply text-base sm:text-lg md:text-xl; }

   p {
     @apply text-gray-600;
   }

  /* Minimum touch targets */
  button, a, input, select, textarea { 
    @apply min-h-[44px] min-w-[44px];
  }

  /* Focus styles */
  :focus-visible {
    @apply outline-none ring-2 ring-primary ring-offset-2;
  }
}

@layer components {
  .container-page {
    @apply mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8;
  }

/* Premium Buttons */
   .btn-primary {
     @apply inline-flex items-center justify-center gap-2 font-medium tracking-widest uppercase text-xs
            bg-primary text-white
            hover:bg-primary/90
            transition-all duration-200
            focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2
            disabled:opacity-50 disabled:pointer-events-none
            min-h-[44px] px-6 py-3 shadow-sm hover:shadow-md;
   }

   .btn-red {
     @apply inline-flex items-center justify-center gap-2 font-bold tracking-widest uppercase text-xs
            bg-[#e31e24] text-white
            shadow-md shadow-[#e31e24]/20
            transition-all duration-200
            hover:bg-[#b91c1c] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#e31e24] focus-visible:ring-offset-2
            disabled:opacity-60 disabled:cursor-not-allowed
            min-h-[44px] px-8 py-3 rounded-full;
   }

  .btn-outline {
    @apply inline-flex items-center justify-center gap-2 font-medium tracking-widest uppercase text-xs
           border border-gray-200 text-gray-700
           hover:bg-gray-50 hover:text-gray-900
           transition-all duration-200
           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2
           disabled:opacity-50 disabled:pointer-events-none
           min-h-[44px] px-6 py-3;
  }

  .btn-outline-dark {
    @apply inline-flex items-center justify-center gap-2 font-bold tracking-widest uppercase text-xs
           border-2 border-[#1a1a1a] text-[#1a1a1a]
           hover:bg-[#1a1a1a] hover:text-white
           transition-all duration-200
           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1a1a1a] focus-visible:ring-offset-2
           disabled:opacity-50 disabled:pointer-events-none
           min-h-[44px] px-8 py-3 rounded-full;
  }

  .btn-destructive {
    @apply inline-flex items-center justify-center gap-2 font-medium tracking-widest uppercase text-xs
           bg-red-50 text-red-600
           hover:bg-red-100 hover:text-red-800
           transition-all duration-200
           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2
           disabled:opacity-50 disabled:pointer-events-none
           min-h-[44px] px-6 py-3;
  }

  .btn-ghost {
    @apply inline-flex items-center justify-center gap-2 font-medium tracking-widest uppercase text-xs
           text-gray-600 hover:text-gray-900 hover:bg-gray-50
           transition-all duration-200
           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2
           disabled:opacity-50 disabled:pointer-events-none
           min-h-[44px] px-6 py-3;
  }

  /* Section label (small uppercase above heading) */
  .section-label {
    @apply text-primary text-[11px] font-bold tracking-[0.25em] uppercase;
  }

  /* Section heading */
  .section-heading {
    @apply text-3xl sm:text-4xl md:text-5xl font-black text-gray-900 tracking-tight leading-tight;
  }

  .section-heading-light {
    @apply text-3xl sm:text-4xl md:text-5xl font-black text-white tracking-tight leading-tight;
  }

  /* Divider with dot */
  .divider-dot {
    @apply flex items-center justify-center gap-3 my-4;
  }
  .divider-dot::before,
  .divider-dot::after {
    content: '';
    @apply flex-1 h-px bg-current opacity-20;
  }
  .divider-dot::before {
    @apply w-2 h-2 rounded-full bg-primary;
  }

  /* Premium Cards */
  .card-premium {
    @apply bg-white border border-gray-200 rounded-xl shadow-sm
           hover:shadow-md transition-shadow duration-200;
  }
  
  .card-premium:hover {
    @apply shadow-md;
  }
  
  /* Premium Tables */
  .table-premium {
    @apply w-full border-separate border-spacing-0;
  }
  
  .table-premium th {
    @apply px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50;
    border-bottom: 1px solid #e5e7eb;
  }
  
  .table-premium td {
    @apply px-4 py-3 text-sm text-gray-700 border-t border-gray-100;
  }
  
  .table-premium tr:hover td {
    @apply bg-gray-50;
  }
  
  /* Premium Badges */
  .badge-premium {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }
  
  .badge-primary {
    @apply bg-primary/10 text-primary;
  }
  
  .badge-secondary {
    @apply bg-gray-100 text-gray-600;
  }
  
  .badge-success {
    @apply bg-green-100 text-green-800;
  }
  
  .badge-warning {
    @apply bg-amber-100 text-amber-800;
  }
  
  .badge-error {
    @apply bg-red-100 text-red-800;
  }

  /* Premium Inputs */
  .input-premium {
    @apply block w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-sm
           file:border-0 file:bg-transparent file:text-sm file:text-gray-600
           placeholder:text-gray-400
           focus:ring-2 focus:ring-primary focus:border-primary
           disabled:opacity-50 disabled:pointer-events-none
           shadow-sm hover:border-gray-300;
  }

  /* Premium Select */
  .select-premium {
    @apply block w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-sm
           placeholder:text-gray-400
           focus:ring-2 focus:ring-primary focus:border-primary
           disabled:opacity-50 disabled:pointer-events-none
           shadow-sm hover:border-gray-300;
  }

  /* Premium Tabs */
  .tabs-premium {
    @apply flex items-center justify-center rounded-md bg-muted p-1;
  }
  
  .tabs-premium button {
    @apply flex h-9 w-full items-center justify-center rounded-sm text-sm font-medium transition-colors
           focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
           disabled:pointer-events-none disabled:opacity-50
           data-[state=active]:bg-background data-[state=active]:text-foreground;
  }

  /* Scrollbar hide */
  .scrollbar-hide::-webkit-scrollbar { display: none; }
  .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

  /* Food placeholder gradients */
  .food-bg-1 { background: linear-gradient(135deg, #2d1a1a 0%, #4a2020 100%); }
  .food-bg-2 { background: linear-gradient(135deg, #1a1a2d 0%, #20204a 100%); }
  .food-bg-3 { background: linear-gradient(135deg, #1a2d1a 0%, #204a20 100%); }
  .food-bg-4 { background: linear-gradient(135deg, #2d2a1a 0%, #4a4020 100%); }
  .food-bg-5 { background: linear-gradient(135deg, #2d1a2a 0%, #4a2040 100%); }

  /* Shimmer */
  @keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }
  .shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
  }

  /* Hero slider fade-in animation */
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in {
    animation: fadeIn 0.6s ease forwards;
  }

  .animate-pop {
    animation: pop 0.45s ease-out forwards;
  }

  /* Slide-in animation */
  @keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
  }

  @keyframes pop {
    0% { opacity: 0; transform: translateY(20px) scale(0.98); }
    80% { opacity: 1; transform: translateY(-6px) scale(1.005); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }
  .animate-slide-in-right {
    animation: slideInRight 0.3s ease-out forwards;
  }

  /* Fade-in animation */
  @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;
  }

  /* Navigation links */
  .nav-link-elegant {
    @apply relative px-4 py-2 text-sm font-medium transition-colors duration-200
           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#e31e24] focus-visible:ring-offset-2 rounded;
  }
}

/* Dark mode adjustments */
.dark {
  --gray-50:    #1a1a1a;
  --gray-100:   #222222;
  --gray-200:   #2d2d2d;
  --gray-300:   #374151;
  --gray-400:   #4b5563;
  --gray-500:   #6b7280;
  --gray-600:   #7f8c9d;
  --gray-700:   #9ca3af;
  --gray-800:   #d1d5db;
  --gray-900:   #e5e7eb;

  --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.2);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.15), 0 2px 4px -2px rgb(0 0 0 / 0.15);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.1);
}