@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;

  /* Navana Real Estate Brand Colors */
  --cinnamon-satin: #cd607f;
  --classic-gray: #a7a7a7;
  --dark-charcoal-gray: #333333;
  --solid-black: #000000;

  /* Color variations for different use cases */
  --cinnamon-satin-light: #d67a94;
  --cinnamon-satin-dark: #b54a6a;
  --classic-gray-light: #c0c0c0;
  --classic-gray-dark: #8a8a8a;
  --dark-charcoal-gray-light: #4a4a4a;
  --dark-charcoal-gray-dark: #1a1a1a;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-creato-display);
  --font-creato: var(--font-creato-display);

  /* Brand Colors */
  --color-cinnamon-satin: var(--cinnamon-satin);
  --color-classic-gray: var(--classic-gray);
  --color-dark-charcoal-gray: var(--dark-charcoal-gray);
  --color-solid-black: var(--solid-black);

  /* Color variations */
  --color-cinnamon-satin-light: var(--cinnamon-satin-light);
  --color-cinnamon-satin-dark: var(--cinnamon-satin-dark);
  --color-classic-gray-light: var(--classic-gray-light);
  --color-classic-gray-dark: var(--classic-gray-dark);
  --color-dark-charcoal-gray-light: var(--dark-charcoal-gray-light);
  --color-dark-charcoal-gray-dark: var(--dark-charcoal-gray-dark);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Fix for Lenis smooth scroll extra scrollbar */
html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

body {
  font-family: var(--font-creato-display), var(--font-times-sans-serif),
    Helvetica, sans-serif;
}

.navbar li a {
  font-family: var(--font-creato-display), sans-serif;
  color: #ffffff;
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 0.02em;
  line-height: 20.4px;
  padding-bottom: 4px;

  border-bottom: 1px solid transparent; /* keeps space reserved */
  box-shadow: inset 0 -1px 0 transparent;
  transition: box-shadow 0.3s ease-in-out;
}

.navbar li a:hover {
  box-shadow: inset 0 -1px 0 #ffffff;
}

.btn-secondary {
  @apply text-white bg-white/35 py-2 px-6 w-[170px] h-[52px] rounded cursor-pointer;
}

.font-creato {
  font-family: var(--font-creato-display), "Helvetica Neue", Helvetica, Arial,
    sans-serif;
}

.font-times-sans {
  font-family: var(--font-times-sans-serif), Arial, Helvetica, sans-serif;
}

/* Brand Color Utility Classes */
.text-cinnamon-satin {
  color: var(--cinnamon-satin);
}
.text-classic-gray {
  color: var(--classic-gray);
}
.text-dark-charcoal-gray {
  color: var(--dark-charcoal-gray);
}
.text-solid-black {
  color: var(--solid-black);
}

.bg-cinnamon-satin {
  background-color: var(--cinnamon-satin);
}
.bg-classic-gray {
  background-color: var(--classic-gray);
}
.bg-dark-charcoal-gray {
  background-color: var(--dark-charcoal-gray);
}
.bg-solid-black {
  background-color: var(--solid-black);
}

.border-cinnamon-satin {
  border-color: var(--cinnamon-satin);
}
.border-classic-gray {
  border-color: var(--classic-gray);
}
.border-dark-charcoal-gray {
  border-color: var(--dark-charcoal-gray);
}
.border-solid-black {
  border-color: var(--solid-black);
}

/* Light variations */
.text-cinnamon-satin-light {
  color: var(--cinnamon-satin-light);
}
.text-classic-gray-light {
  color: var(--classic-gray-light);
}
.text-dark-charcoal-gray-light {
  color: var(--dark-charcoal-gray-light);
}

.bg-cinnamon-satin-light {
  background-color: var(--cinnamon-satin-light);
}
.bg-classic-gray-light {
  background-color: var(--classic-gray-light);
}
.bg-dark-charcoal-gray-light {
  background-color: var(--dark-charcoal-gray-light);
}

/* Dark variations */
.text-cinnamon-satin-dark {
  color: var(--cinnamon-satin-dark);
}
.text-classic-gray-dark {
  color: var(--classic-gray-dark);
}
.text-dark-charcoal-gray-dark {
  color: var(--dark-charcoal-gray-dark);
}

.bg-cinnamon-satin-dark {
  background-color: var(--cinnamon-satin-dark);
}
.bg-classic-gray-dark {
  background-color: var(--classic-gray-dark);
}
.bg-dark-charcoal-gray-dark {
  background-color: var(--dark-charcoal-gray-dark);
}

/* Magnetic Snap Effects */
section {
  transition: transform 0.2s ease-out;
  transform-origin: center;
}

section.magnetic-active {
  transform: scale(1.002);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
}