@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ============================================================
   HotelBox Hub — design tokens (ported 1:1 from the React app's
   src/index.css). All colours are HSL channel triplets consumed
   by the Tailwind config via hsl(var(--token)).
   ============================================================ */
:root {
  --font-inter: 'Inter', sans-serif;

  --background: 210 20% 98%;
  --foreground: 220 20% 10%;
  --card: 0 0% 100%;
  --card-foreground: 220 20% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 220 20% 10%;
  --primary: 38 92% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 220 9% 46%;
  --secondary-foreground: 0 0% 100%;
  --muted: 220 14% 96%;
  --muted-foreground: 220 9% 46%;
  --accent: 38 92% 95%;
  --accent-foreground: 38 92% 30%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 38 92% 50%;
  --chart-1: 38 92% 50%;
  --chart-2: 173 58% 39%;
  --chart-3: 197 37% 24%;
  --chart-4: 43 74% 66%;
  --chart-5: 27 87% 67%;
  --radius: 0.75rem;
  --sidebar-background: 220 20% 10%;
  --sidebar-foreground: 220 14% 96%;
  --sidebar-primary: 38 92% 50%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 220 15% 16%;
  --sidebar-accent-foreground: 220 14% 96%;
  --sidebar-border: 220 15% 18%;
  --sidebar-ring: 38 92% 50%;

  --success: 142 76% 36%;
  --success-foreground: 0 0% 100%;
  --warning: 38 92% 50%;
  --warning-foreground: 0 0% 100%;
  --info: 210 92% 50%;
  --info-foreground: 0 0% 100%;
}

.dark {
  --background: 220 20% 7%;
  --foreground: 220 14% 96%;
  --card: 220 20% 10%;
  --card-foreground: 220 14% 96%;
  --popover: 220 20% 10%;
  --popover-foreground: 220 14% 96%;
  --primary: 38 92% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 220 9% 60%;
  --secondary-foreground: 0 0% 100%;
  --muted: 220 15% 16%;
  --muted-foreground: 220 9% 60%;
  --accent: 38 92% 15%;
  --accent-foreground: 38 92% 70%;
  --destructive: 0 62% 30%;
  --destructive-foreground: 0 0% 98%;
  --border: 220 15% 18%;
  --input: 220 15% 18%;
  --ring: 38 92% 50%;
  --chart-1: 38 92% 50%;
  --chart-2: 160 60% 45%;
  --chart-3: 30 80% 55%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;
  --sidebar-background: 220 20% 5%;
  --sidebar-foreground: 220 14% 96%;
  --sidebar-primary: 38 92% 50%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 220 15% 12%;
  --sidebar-accent-foreground: 220 14% 96%;
  --sidebar-border: 220 15% 14%;
  --sidebar-ring: 38 92% 50%;

  --success: 142 76% 36%;
  --success-foreground: 0 0% 100%;
  --warning: 38 92% 50%;
  --warning-foreground: 0 0% 100%;
  --info: 210 92% 50%;
  --info-foreground: 0 0% 100%;
}

* {
  border-color: hsl(var(--border));
}

html { scroll-behavior: smooth; }

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-inter);
  -webkit-font-smoothing: antialiased;
}

/* Marquee animation for the login promo ticker */
@keyframes marquee-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.animate-marquee-x { animation: marquee-x 40s linear infinite; }

/* Soft float for showcase cards */
@keyframes soft-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.animate-soft-float { animation: soft-float 6s ease-in-out infinite; }

/* Slow pulse for AI / map glow dots */
@keyframes glow-pulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.25); }
}
.animate-glow-pulse { animation: glow-pulse 2.4s ease-in-out infinite; }

/* Page-mount transitions (ported from the Tailwind config keyframes) */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fade-in 0.3s ease-out; }

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
.animate-slide-in-right { animation: slide-in-right 0.3s ease-out; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.3);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / 0.5); }

/* ------------------------------------------------------------
   Lightweight component classes — equivalents of the shadcn/ui
   primitives the React app used. Kept small; most styling stays
   inline via Tailwind utility classes on the markup.
   ------------------------------------------------------------ */

/* Dropdown / popover panels (toggled by data-dropdown in ui.js) */
.hbx-pop {
  position: absolute;
  z-index: 50;
  display: none;
  animation: fade-in 0.15s ease-out;
}
.hbx-pop.open { display: block; }

/* Modal / dialog overlay */
.hbx-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgb(0 0 0 / 0.5);
  backdrop-filter: blur(2px);
}
.hbx-overlay.open { display: flex; animation: fade-in 0.2s ease-out; }

/* Toast container */
#hbx-toasts {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 360px;
}

/* Range input accent */
input[type="range"] { accent-color: hsl(var(--primary)); }