/* ==========================================
   Homes4Sale - Design System CSS
   All colors use HSL values matching the React version.
   ========================================== */

/* CSS Custom Properties (Design Tokens) */
:root {
    --sat: env(safe-area-inset-top);
    
    --background: 220 30% 99%;
    --foreground: 210 24% 16%;

    --card: 0 0% 100%;
    --card-foreground: 210 24% 16%;

    --popover: 0 0% 100%;
    --popover-foreground: 210 24% 16%;

    --primary: 210 100% 20%;
    --primary-foreground: 0 0% 100%;

    --secondary: 210 40% 96%;
    --secondary-foreground: 210 24% 16%;

    --muted: 210 40% 96%;
    --muted-foreground: 210 16% 46%;

    --accent: 14 90% 55%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 210 40% 90%;
    --input: 210 40% 90%;
    --ring: 210 100% 20%;

    --radius: 0.5rem;

    --sidebar: 0 0% 100%;
    --sidebar-foreground: 210 24% 16%;
    --sidebar-border: 210 40% 90%;
    --sidebar-accent: 210 40% 96%;
    --sidebar-accent-foreground: 210 24% 16%;
    --sidebar-ring: 210 100% 20%;

    --gradient-hero: linear-gradient(135deg, hsl(210 100% 20%), hsl(210 100% 30%));
    --shadow-card: 0 2px 8px -2px hsl(210 40% 20% / 0.1);
    --shadow-hover: 0 8px 16px -4px hsl(210 40% 20% / 0.15);
}

.dark {
    --background: 210 30% 8%;
    --foreground: 210 40% 98%;

    --card: 210 25% 12%;
    --card-foreground: 210 40% 98%;

    --popover: 210 25% 12%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 100% 50%;
    --primary-foreground: 0 0% 100%;

    --secondary: 210 25% 18%;
    --secondary-foreground: 210 40% 98%;

    --muted: 210 25% 18%;
    --muted-foreground: 210 20% 65%;

    --accent: 14 90% 55%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 63% 31%;
    --destructive-foreground: 210 40% 98%;

    --border: 210 25% 18%;
    --input: 210 25% 18%;
    --ring: 210 100% 50%;

    --sidebar: 210 25% 12%;
    --sidebar-foreground: 210 40% 98%;
    --sidebar-border: 210 25% 18%;
    --sidebar-accent: 210 25% 18%;
    --sidebar-accent-foreground: 210 40% 98%;
    --sidebar-ring: 210 100% 50%;

    --gradient-hero: linear-gradient(135deg, hsl(210 100% 25%), hsl(210 100% 35%));
    --shadow-card: 0 2px 8px -2px hsl(0 0% 0% / 0.3);
    --shadow-hover: 0 8px 16px -4px hsl(0 0% 0% / 0.4);
}

/* ==========================================
   Base Styles
   ========================================== */
*, *::before, *::after { border-color: hsl(var(--border)); }
body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }

/* Utility classes mapping CSS vars to Tailwind-style classes */
.bg-background { background-color: hsl(var(--background)); }
.bg-foreground { background-color: hsl(var(--foreground)); }
.bg-card { background-color: hsl(var(--card)); }
.bg-popover { background-color: hsl(var(--popover)); }
.bg-primary { background-color: hsl(var(--primary)); }
.bg-primary\/5 { background-color: hsl(var(--primary) / 0.05); }
.bg-primary\/10 { background-color: hsl(var(--primary) / 0.1); }
.bg-primary\/90 { background-color: hsl(var(--primary) / 0.9); }
.bg-secondary { background-color: hsl(var(--secondary)); }
.bg-muted { background-color: hsl(var(--muted)); }
.bg-muted\/30 { background-color: hsl(var(--muted) / 0.3); }
.bg-muted\/50 { background-color: hsl(var(--muted) / 0.5); }
.bg-accent { background-color: hsl(var(--accent)); }
.bg-destructive { background-color: hsl(var(--destructive)); }

.text-foreground { color: hsl(var(--foreground)); }
.text-card-foreground { color: hsl(var(--card-foreground)); }
.text-popover-foreground { color: hsl(var(--popover-foreground)); }
.text-primary { color: hsl(var(--primary)); }
.text-primary-foreground { color: hsl(var(--primary-foreground)); }
.text-secondary-foreground { color: hsl(var(--secondary-foreground)); }
.text-muted-foreground { color: hsl(var(--muted) / 1); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.text-accent { color: hsl(var(--accent)); }
.text-accent-foreground { color: hsl(var(--accent-foreground)); }
.text-destructive { color: hsl(var(--destructive)); }
.text-destructive-foreground { color: hsl(var(--destructive-foreground)); }

.border-border { border-color: hsl(var(--border)); }
.border-input { border-color: hsl(var(--input)); }
.border-primary { border-color: hsl(var(--primary)); }
.border-primary\/50 { border-color: hsl(var(--primary) / 0.5); }

.ring-primary { --tw-ring-color: hsl(var(--primary)); }
.ring-ring { --tw-ring-color: hsl(var(--ring)); }

.hover\:bg-primary\/90:hover { background-color: hsl(var(--primary) / 0.9); }
.hover\:bg-muted:hover { background-color: hsl(var(--muted)); }
.hover\:bg-muted\/50:hover { background-color: hsl(var(--muted) / 0.5); }
.hover\:text-primary:hover { color: hsl(var(--primary)); }
.hover\:text-foreground:hover { color: hsl(var(--foreground)); }

.focus\:ring-primary:focus { --tw-ring-color: hsl(var(--primary)); }

/* ==========================================
   Leaflet Map Z-index Fixes
   ========================================== */
.leaflet-pane, .leaflet-top, .leaflet-bottom, .leaflet-control { z-index: 0 !important; }
.leaflet-container { z-index: 0; }
.leaflet-control-zoom, .leaflet-control-attribution { z-index: 1 !important; }

/* ==========================================
   iOS Safe Area Support
   ========================================== */
html { background-color: hsl(var(--card)); }
.safe-area-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }
.safe-area-top { padding-top: env(safe-area-inset-top, 0); }
.header-safe-area { position: sticky; top: 0; padding-top: env(safe-area-inset-top, 0); }

.bg-extend-top::before {
    content: '';
    position: absolute;
    top: calc(-1 * env(safe-area-inset-top, 0));
    left: 0; right: 0;
    height: env(safe-area-inset-top, 0);
    background: inherit;
    z-index: -1;
}

.bg-extend-bottom::after {
    content: '';
    position: absolute;
    bottom: calc(-1 * env(safe-area-inset-bottom, 0));
    left: 0; right: 0;
    height: env(safe-area-inset-bottom, 0);
    background: inherit;
    z-index: -1;
}

/* ==========================================
   Animations
   ========================================== */
@keyframes heart-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

@keyframes pulse-subtle {
    0%, 100% { box-shadow: 0 0 0 0 hsl(var(--primary) / 0.4); }
    50% { box-shadow: 0 0 0 8px hsl(var(--primary) / 0); }
}

@keyframes scale-in {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes fade-in {
    0% { opacity: 0; transform: translateY(4px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

@keyframes slide-up {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.animate-heart-pop { animation: heart-pop 0.3s ease-in-out; }
.animate-pulse-subtle { animation: pulse-subtle 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-scale-in { animation: scale-in 0.2s ease-out; }
.animate-fade-in { animation: fade-in 0.3s ease-out; }
.animate-slide-up { animation: slide-up 0.4s ease-out; }

.shimmer { position: relative; overflow: hidden; }
.shimmer::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    animation: shimmer 2s infinite;
}

/* ==========================================
   Touch Optimizations
   ========================================== */
.touch-manipulation { touch-action: manipulation; }
.touch-target { min-width: 44px; min-height: 44px; }
.touch-active:active { opacity: 0.7; transform: scale(0.98); transition: all 0.1s ease-out; }

/* ==========================================
   Bottom Nav Spacing
   ========================================== */
.pb-mobile-nav { padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0)); }
@media (min-width: 768px) { .pb-mobile-nav { padding-bottom: 0; } }

/* ==========================================
   Responsive Small Screen
   ========================================== */
@media (max-width: 374px) {
    .container { padding-left: 12px; padding-right: 12px; }
}

/* ==========================================
   Hero Section Gradient
   ========================================== */
.hero-gradient { background: var(--gradient-hero); }

/* Hero floating animations */
@keyframes hero-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(15px, -20px) scale(1.05); }
    66% { transform: translate(-10px, 10px) scale(0.95); }
}
@keyframes hero-float-delayed {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-20px, 15px) scale(0.95); }
    66% { transform: translate(10px, -10px) scale(1.05); }
}
.animate-hero-float { animation: hero-float 8s ease-in-out infinite; }
.animate-hero-float-delayed { animation: hero-float-delayed 10s ease-in-out infinite 2s; }

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

/* Thin scrollbar for gallery thumbnails */
.scrollbar-thin::-webkit-scrollbar { width: 4px; height: 4px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }
.scrollbar-thin::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }
.scrollbar-thin { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.2) transparent; }

/* ==========================================
   Prose Styles (for content pages)
   ========================================== */
.prose p { margin-bottom: 1em; line-height: 1.75; }
.prose h2 { margin-top: 2em; margin-bottom: 0.5em; }
.prose ul { list-style-type: disc; padding-left: 1.5em; }
.prose ol { list-style-type: decimal; padding-left: 1.5em; }
.prose a { color: hsl(var(--primary)); text-decoration: underline; }

/* ==========================================
   Password Strength Indicator
   ========================================== */
.password-strength-bar { height: 4px; border-radius: 2px; transition: width 0.3s, background-color 0.3s; }
.strength-weak { background-color: #ef4444; width: 25%; }
.strength-fair { background-color: #f59e0b; width: 50%; }
.strength-good { background-color: #3b82f6; width: 75%; }
.strength-strong { background-color: #22c55e; width: 100%; }