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

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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5.9% 10%;
    --radius: 0.5rem;

    /* ruby_ui specific */
    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 100%;
    --success: 87 100% 37%;
    --success-foreground: 0 0% 100%;

    /* aSuggestion custom named colors as CSS variables so dark mode
       overrides them globally without touching each component file. */
    --color-white-smoke:    0 0% 96.5%;      /* #F6F6F6 */
    --color-custom-gray:    225 14% 95%;      /* #F0F1F4 */
    --color-ghost-grey:     240 20% 98%;      /* #F8F8FA */
    --color-isabelline:     14 32% 95%;       /* #F5EFEE */
    --color-red-orange:     14 32% 98%;       /* #FFF8F6 */
    --color-titles:         330 3% 12%;       /* #201E1F */
    --color-input-text:     215 24% 27%;      /* #344254 */
    --color-text-default:   210 18% 35%;      /* #485668 */
    --color-secondary-text: 205 23% 59%;      /* #7B9DB4 */
    --color-disable-text:   210 9% 63%;       /* #96A0AA */
    --color-disable-bg:     210 14% 85%;      /* #D4DBDF */
    --color-gunmetal-blue:  207 16% 31%;      /* #41525F */
    --color-davys-gray:     0 0% 35%;         /* #5A5A5A */
    --color-taupe-gray:     226 5% 56%;       /* #80828D */
  }

  .dark {
    --background: 222 47% 11%;
    --foreground: 215 20% 88%;
    --card: 222 40% 14%;
    --card-foreground: 215 20% 88%;
    --popover: 222 40% 14%;
    --popover-foreground: 215 20% 88%;
    --primary: 0 0% 92%;
    --primary-foreground: 222 47% 11%;
    --secondary: 222 35% 18%;
    --secondary-foreground: 0 0% 88%;
    --muted: 222 35% 18%;
    --muted-foreground: 215 14% 55%;
    --accent: 222 35% 18%;
    --accent-foreground: 0 0% 88%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 222 30% 22%;
    --input: 222 30% 22%;
    --ring: 215 20% 65%;

    /* ruby_ui specific */
    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 100%;
    --success: 84 81% 44%;
    --success-foreground: 0 0% 100%;

    /* Dark overrides for aSuggestion custom named colors */
    --color-white-smoke:    222 47% 11%;      /* dark page background */
    --color-custom-gray:    222 40% 14%;      /* dark panel background */
    --color-ghost-grey:     222 40% 14%;      /* dark ghost background */
    --color-isabelline:     222 35% 16%;      /* dark warm background */
    --color-red-orange:     222 35% 16%;      /* dark tint background */
    --color-titles:         0 0% 95%;         /* near-white headings */
    --color-input-text:     215 15% 82%;      /* light form text */
    --color-text-default:   215 18% 72%;      /* body text */
    --color-secondary-text: 215 16% 60%;      /* secondary text */
    --color-disable-text:   215 12% 62%;      /* muted text — brighter in dark mode for legibility */
    --color-disable-bg:     222 30% 25%;      /* muted background */
    --color-gunmetal-blue:  210 20% 65%;      /* elevated text */
    --color-davys-gray:     0 0% 65%;         /* gray text */
    --color-taupe-gray:     215 10% 55%;      /* taupe text */
  }
}

/* Collapsible mobile nav — header slides up, footer slides down on scroll */
.mobile-nav-hidden-top {
  transform: translateY(-100%);
}
.mobile-nav-hidden-bottom {
  transform: translateY(100%);
}

/* Keep mobile layout when phone is rotated to landscape (width > 640px but height < 500px) */
@media screen and (orientation: landscape) and (max-height: 500px) {
  .mobile-landscape-hide { display: none !important; }
  .mobile-landscape-show { display: flex !important; }
  .mobile-landscape-spacer { display: block !important; }
}

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

  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;

    /* docs specific */
    /* https://css-tricks.com/snippets/css/system-font-stack/ */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  }
}

/* Dark-mode overrides for hardcoded Tailwind utilities that aren't covered by
   CSS variables above. These apply globally when html.dark is active. */
@layer utilities {
  /* Card / panel backgrounds */
  .dark .bg-white    { background-color: rgb(22 33 49); }
  .dark .bg-gray-50  { background-color: rgb(22 33 49); }
  .dark .bg-gray-100 { background-color: rgb(34 48 68); }

  /* Borders */
  .dark .border-gray-100  { border-color: rgb(38 54 74); }
  .dark .border-gray-200  { border-color: rgb(38 54 74); }
  .dark .border-slate-200 { border-color: rgb(38 54 74); }

  /* Sidebar gradients */
  .dark .bg-sidebar-gradient {
    background-image: linear-gradient(339.49deg, #0f1e30 -5.08%, #1e4a6b 71.36%);
  }
  .dark .bg-featured-rooms-gradient {
    background-image: linear-gradient(339.49deg, #0f1e30 -5.08%, #3d2460 71.36%);
  }
  .dark .bg-mobile-header-gradient {
    background-image: linear-gradient(275.95deg, #0f1e30 -41.51%, #0f1e30 -32.9%, #1e4a6b 50.93%, #1e4a6b 105.12%);
  }
  .dark .bg-user-profile-gradient {
    background-image: linear-gradient(5.52deg, #0f1e30 -50.09%, #5a2d24 82.41%);
  }
  .dark .bg-mobile-profile-gradient {
    background-image: linear-gradient(339.49deg, #0f1e30 -5.08%, #0c3048 71.36%);
  }

  /* Tinted alert / highlight boxes */
  .dark .bg-blue-50   { background-color: rgb(19 35 60); }
  .dark .bg-amber-50  { background-color: rgb(40 33 15); }
  .dark .bg-green-50  { background-color: rgb(15 36 20); }
  .dark .bg-red-50    { background-color: rgb(42 18 18); }
  .dark .bg-yellow-50 { background-color: rgb(40 33 15); }
  .dark .bg-purple-50 { background-color: rgb(28 20 45); }

  /* Hover states */
  .dark .hover\:bg-gray-50:hover  { background-color: rgb(28 40 56); }
  .dark .hover\:bg-gray-100:hover { background-color: rgb(38 54 74); }

  /* Logo bubble: always white regardless of bg-isabelline dark override */
  .dark .logo-bubble-light { background-color: #ffffff; }
}

/* Dark mode for plain HTML form inputs and the Trix rich-text editor.
   These elements are generated by Rails form helpers without Tailwind classes,
   so they fall back to browser-default white/black in dark mode without this. */
.dark input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="range"]),
.dark textarea,
.dark select {
  background-color: hsl(222deg 40% 17%);
  color: hsl(215deg 20% 88%);
  border-color: hsl(222deg 30% 28%);
}

.dark trix-editor {
  background-color: hsl(222deg 40% 17%);
  color: hsl(215deg 20% 88%);
  border-color: hsl(222deg 30% 28%) !important;
}

.dark trix-toolbar {
  background-color: hsl(222deg 40% 14%);
  border-bottom-color: hsl(222deg 30% 22%);
}

.dark trix-toolbar .trix-button {
  color: hsl(215deg 20% 75%);
  background-color: transparent;
}

.dark trix-toolbar .trix-button:not(:disabled):hover {
  background-color: hsl(222deg 35% 22%);
}

.dark trix-toolbar .trix-button.trix-active {
  background-color: hsl(222deg 35% 25%);
}

.dark trix-toolbar .trix-button-group {
  border-color: hsl(222deg 30% 28%);
}

/* Suppress all transitions and transforms for users who prefer reduced motion.
   The html.reduced-motion class is toggled by reduced_motion_controller.js.
   This complements the Tailwind motion-reduce: variant which only targets the OS preference. */
html.reduced-motion *,
html.reduced-motion *::before,
html.reduced-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}