@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  
  --color-sidebar: hsl(var(--sidebar));
  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
  --color-sidebar-primary: hsl(var(--sidebar-primary));
  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
  --color-sidebar-accent: hsl(var(--sidebar-accent));
  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
  --color-sidebar-border: hsl(var(--sidebar-border));
  --color-sidebar-ring: hsl(var(--sidebar-ring));

  --font-sans: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  
  --animate-in: fade-in 0.2s ease-out;
  --animate-out: fade-out 0.2s ease-in;
}

/* LUXURY GOLD & BLACK THEME */
:root {
  /* Deep Black Backgrounds */
  --background: 240 10% 3.9%; /* Rich Black */
  --foreground: 45 20% 90%; /* Soft Gold-White */

  --card: 240 10% 5%; /* Slightly Lighter Black */
  --card-foreground: 45 30% 90%;

  --popover: 240 10% 5%;
  --popover-foreground: 45 30% 90%;

  /* GOLD PRIMARY */
  --primary: 45 90% 50%; /* Pure Gold */
  --primary-foreground: 240 10% 3.9%; /* Black Text on Gold */

  --secondary: 240 5% 15%; /* Dark Grey */
  --secondary-foreground: 45 30% 90%;

  --muted: 240 5% 15%;
  --muted-foreground: 240 5% 60%;

  --accent: 45 90% 50%;
  --accent-foreground: 240 10% 3.9%;

  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;

  --border: 45 30% 20%; /* Subtle Gold Borders */
  --input: 240 5% 15%;
  --ring: 45 90% 50%;

  --radius: 0.5rem;

  --sidebar: 240 10% 4%;
  --sidebar-foreground: 45 20% 80%;
  --sidebar-primary: 45 90% 50%;
  --sidebar-primary-foreground: 240 10% 3.9%;
  --sidebar-accent: 240 5% 12%;
  --sidebar-accent-foreground: 45 90% 50%;
  --sidebar-border: 45 20% 15%;
  --sidebar-ring: 45 90% 50%;
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply font-sans antialiased bg-background text-foreground;
  }
}

/* Luxury Grid Background */
.bg-grid-pattern {
  background-size: 50px 50px;
  background-image: 
    linear-gradient(to right, rgba(212, 175, 55, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(212, 175, 55, 0.05) 1px, transparent 1px);
}

/* Custom Scrollbar for Webkit */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: hsl(var(--background)); 
}
::-webkit-scrollbar-thumb {
  background: hsl(var(--primary) / 0.3); 
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--primary) / 0.5); 
}

/* ===== MOBILE RESPONSIVE UTILITIES ===== */

/* Mobile drawer backdrop */
@media (max-width: 767px) {
  .mobile-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 45;
    animation: fadeIn 0.2s ease-out;
  }

  /* Mobile drawer slide-in */
  .mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 50;
    animation: slideInLeft 0.3s ease-out;
  }
}

@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* Mobile bottom tab bar */
@media (max-width: 767px) {
  .mobile-tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background: hsl(240 10% 4%);
    border-top: 1px solid hsl(var(--primary) / 0.2);
    display: flex;
    padding: 0.5rem 0;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 768px) {
  .mobile-tab-bar {
    display: none !important;
  }
}

/* Mobile menu dropdown */
.mobile-menu {
  animation: slideDown 0.2s ease-out;
}

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

/* Touch-friendly scrolling */
@media (max-width: 767px) {
  .overflow-y-auto,
  .overflow-auto {
    -webkit-overflow-scrolling: touch;
  }
  
  /* Prevent horizontal overflow on mobile */
  body {
    overflow-x: hidden;
  }
}