/**
 * Neighborhood Finder - Tailwind 4 Design System
 *
 * Enterprise-grade theming with light/dark mode support
 * Last Updated: December 3, 2025
 */

@theme {
  /* ===================================================================
     AGENT REBRAND SECTION START
     Change these 4 values to rebrand the entire application
     =================================================================== */

  /* Primary Brand Color */
  --color-brand-base: #4c8f96;
  --color-brand-hover: #3a7179;
  --color-brand-light: rgba(76, 143, 150, 0.1);
  --color-brand-rgb: 76, 143, 150;

  /* ===================================================================
     AGENT REBRAND SECTION END
     =================================================================== */

  /* Neutral Palette (Light Mode) */
  --color-neutral-50: #f9fafb;
  --color-neutral-100: #f3f4f6;
  --color-neutral-200: #e5e7eb;
  --color-neutral-300: #d1d5db;
  --color-neutral-400: #9ca3af;
  --color-neutral-500: #6b7280;
  --color-neutral-600: #4b5563;
  --color-neutral-700: #374151;
  --color-neutral-800: #313842;
  --color-neutral-900: #1f2937;

  /* Dark Mode Colors */
  --color-dark-bg-base: #0f1419;
  --color-dark-bg-elevated: #1a1f26;
  --color-dark-bg-elevated-2: #252b34;
  --color-dark-border: #2d3440;
  --color-dark-text-primary: #e8eaed;
  --color-dark-text-secondary: #9ca3af;

  /* Brand Colors (Dark Mode Adjusted) */
  --color-brand-dark: #5ba3ab;
  --color-brand-dark-hover: #6bb5be;

  /* Functional Colors */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* === SEMANTIC ALIASES === */

  /* Primary/Brand */
  --color-primary: var(--color-brand-base);
  --color-primary-hover: var(--color-brand-hover);
  --color-primary-light: var(--color-brand-light);

  /* Text Colors */
  --color-text-primary: var(--color-neutral-800);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-muted: var(--color-neutral-500);
  --color-text-inverse: white;

  /* Background Colors */
  --color-bg-base: white;
  --color-bg-sidebar: white;
  --color-bg-panel: white;
  --color-bg-card: white;
  --color-bg-hover: var(--color-neutral-50);
  --color-bg-active: var(--color-neutral-100);
  --color-bg-tag: var(--color-neutral-100);
  --color-bg-overlay: rgba(0, 0, 0, 0.5);

  /* Border Colors */
  --color-border: var(--color-neutral-200);
  --color-border-divider: var(--color-neutral-200);
  --color-border-focus: var(--color-brand-base);
  --color-border-hover: var(--color-neutral-300);

  /* Shadow Colors */
  --color-shadow: rgba(0, 0, 0, 0.1);
  --color-shadow-lg: rgba(0, 0, 0, 0.15);

  /* === EXTEND TAILWIND COLOR SCALE === */

  /* Brand Scale (for bg-brand-500, text-brand-600, etc.) */
  --color-brand-50: #f0f9fa;
  --color-brand-100: #d9f0f3;
  --color-brand-200: #b3e1e7;
  --color-brand-300: #8dd2db;
  --color-brand-400: #67c3cf;
  --color-brand-500: var(--color-brand-base);
  --color-brand-600: var(--color-brand-hover);
  --color-brand-700: #2d575d;
  --color-brand-800: #1f3d41;
  --color-brand-900: #122325;

  /* === TYPOGRAPHY === */

  /* Font Families */
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Fluid Typography Scale (Responsive) */
  --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --font-size-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --font-size-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  --font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --font-size-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
  --font-size-3xl: clamp(1.875rem, 1.6rem + 1.375vw, 2.25rem);
  --font-size-4xl: clamp(2.25rem, 1.9rem + 1.75vw, 3rem);

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;

  /* === SPACING === */

  /* Vertical Spacing (8px base unit) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;

  /* Horizontal Container Spacing */
  --container-padding-mobile: 1rem;
  --container-padding-tablet: 1.5rem;
  --container-padding-desktop: 2rem;
  --container-padding-wide: 3rem;

  /* Container Max Widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;

  /* Custom Spacing */
  --space-sidebar-width: 460px;

  /* === BORDER RADIUS === */

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;

  /* === TRANSITIONS === */

  --transition-fast: 150ms;
  --transition-base: 200ms;
  --transition-slow: 300ms;

  /* === Z-INDEX SCALE === */

  --z-sidebar: 1000;
  --z-dropdown: 1100;
  --z-modal: 1200;
  --z-tooltip: 1300;

  /* === BREAKPOINTS === */

  --breakpoint-xs: 420px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* Smooth theme transitions */
/* Apply to elements without explicit transitions defined */
*:not(.sliding-panel):not(#sidebar):not([class*="duration-"]) {
  transition-property: background-color, border-color, color;
  transition-duration: var(--transition-base);
  transition-timing-function: ease-in-out;
}

/* Sidebar peer-checked styles (Tailwind peer utility) */
#drawer-toggle:checked ~ #sidebar {
  translate: 0 0 !important;
}

/* Allow map clicks through backdrop - fix marker click issue */
#map {
  position: relative;
  z-index: 31 !important; /* Higher than backdrop (z-30) */
  pointer-events: auto !important;
}

/* Disable transitions during theme initialization */
.no-transitions *,
.no-transitions *::before,
.no-transitions *::after {
  transition: none !important;
}

/* Custom Divider - Light/Dark theme flexible */
hr.divider {
  border-color: var(--color-neutral-200);
  margin: 0;
}

.dark hr.divider {
  border-color: var(--color-dark-border);
}

/* Range Slider Styles */
.range-slider {
  position: relative;
  height: 4px;
  margin: 1rem 0;
}

.range-track-bg {
  position: absolute;
  width: 100%;
  height: 4px;
  background-color: var(--color-neutral-200);
  border-radius: 2px;
}

.dark .range-track-bg {
  background-color: var(--color-dark-border);
}

.range-track-fill {
  position: absolute;
  height: 4px;
  background-color: var(--color-brand-base);
  opacity: 0.5;
  border-radius: 2px;
  pointer-events: none;
}

.dark .range-track-fill {
  background-color: var(--color-brand-dark);
  opacity: 0.5;
}

.range-slider input[type="range"] {
  position: absolute;
  width: 100%;
  height: 4px;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.range-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background-color: var(--color-brand-base);
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.dark .range-slider input[type="range"]::-webkit-slider-thumb {
  background-color: var(--color-brand-dark);
  border-color: var(--color-dark-bg-elevated);
}

.range-slider input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background-color: var(--color-brand-base);
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.dark .range-slider input[type="range"]::-moz-range-thumb {
  background-color: var(--color-brand-dark);
  border-color: var(--color-dark-bg-elevated);
}

/* Optional: Scan files for classes */
@source "../../../index.html";
@source "../../../assets/js/*.js";


/* Tailwind base, components, utilities */
@import "tailwindcss";

/* Configure dark mode to use class strategy instead of prefers-color-scheme */
@variant dark (.dark &);