/* ==========================================================================
   INMOIZAN DESIGN TOKENS SYSTEM
   Sistema completo de Custom Properties (CSS Variables) para proyecto inmobiliario
   
   Archivo: /assets/css/root.css
   Prioridad: Máxima (carga antes que cualquier otro CSS)
   Dependencias: Ninguna
   Responsabilidad: Definir todos los design tokens del sistema
   
   ==========================================================================
   METODOLOGÍAS IMPLEMENTADAS:
   ==========================================================================
   
   DESIGN SYSTEM APPROACH:
   - Design Tokens centralizados
   - Escalas consistentes y matemáticamente precisas
   - Nomenclatura semántica y predecible
   - Responsive design con fluid values
   
   SMACSS (Scalable and Modular Architecture):
   - Variables organizadas por categorías funcionales
   - Separación clara entre tokens base y específicos
   - Escalabilidad para nuevos componentes
   
   BEM (Block Element Modifier):
   - Nomenclatura consistente para tokens de componentes
   - Modificadores claramente identificables
   - Relaciones jerárquicas evidentes
   
   OOCSS (Object Oriented CSS):
   - Separación estructura/apariencia en tokens
   - Reutilización máxima de valores
   - Abstracciones apropiadas
   
   FLUID DESIGN:
   - Uso extensivo de clamp() para responsividad
   - Reducción de media queries
   - Escalado automático según viewport
   
   ==========================================================================
   COMPATIBILIDAD Y REQUISITOS:
   ==========================================================================
   
   Navegadores soportados: Últimas 2 versiones de cada navegador principal
   CSS Custom Properties: Requerido (IE11 no soportado)
   CSS clamp(): Requerido (Safari 13.1+, Chrome 79+, Firefox 75+)
   WordPress: 6.0+
   Tema padre: FSE Real Estate
   
   ==========================================================================
   ESTRUCTURA DEL ARCHIVO:
   ==========================================================================
   
   1. COLOR SYSTEM - Paletas y colores semánticos
   2. TYPOGRAPHY SYSTEM - Fuentes, tamaños y espaciado vertical
   3. SPACING SYSTEM - Escalas de espaciado y layout
   4. LAYOUT SYSTEM - Contenedores, grid y estructura
   5. BORDER SYSTEM - Radios y anchos de borde
   6. SHADOW SYSTEM - Elevaciones y efectos
   7. ANIMATION SYSTEM - Transiciones y timing
   8. Z-INDEX SYSTEM - Capas y superposición
   9. COMPONENT TOKENS - Variables específicas de componentes
   10. RESPONSIVE ADJUSTMENTS - Ajustes por breakpoint
   11. ACCESSIBILITY FEATURES - Soporte para preferencias del usuario
   12. THEME VARIATIONS - Tokens para temas alternativos
   
   ========================================================================== */

:root {
   /* ==========================================================================
     1. COLOR SYSTEM
     Sistema de colores completo con paletas escalables y semántica clara
     ========================================================================== */

   /* ===== Primary Color Palette (Azul inmobiliario profesional) ===== */
   --color-primary-50: #f0f9ff;   /* Más claro - backgrounds sutiles */
   --color-primary-100: #e0f2fe;  /* Muy claro - hover states ligeros */
   --color-primary-200: #bae6fd;  /* Claro - borders suaves */
   --color-primary-300: #7dd3fc;  /* Medio claro - elementos secundarios */
   --color-primary-400: #38bdf8;  /* Medio - elementos interactivos */
   --color-primary-500: #0ea5e9;  /* Base - color principal */
   --color-primary-600: #0284c7;  /* Saturado - botones principales */
   --color-primary-700: #0369a1;  /* Oscuro - hover states */
   --color-primary-800: #075985;  /* Más oscuro - texto sobre fondos claros */
   --color-primary-900: #0c4a6e;  /* Más oscuro - headings importantes */

   /* ===== Secondary Color Palette (Verde éxito/naturaleza) ===== */
   --color-secondary-50: #f0fdf4;   /* Backgrounds de éxito sutiles */
   --color-secondary-100: #dcfce7;  /* Estados de validación positiva */
   --color-secondary-200: #bbf7d0;  /* Borders de elementos válidos */
   --color-secondary-300: #86efac;  /* Elementos secundarios verdes */
   --color-secondary-400: #4ade80;  /* Interacciones positivas */
   --color-secondary-500: #22c55e;  /* Verde base */
   --color-secondary-600: #16a34a;  /* Botones de confirmación */
   --color-secondary-700: #15803d;  /* Estados hover positivos */
   --color-secondary-800: #166534;  /* Texto de confirmación */
   --color-secondary-900: #14532d;  /* Texto importante positivo */

   /* ===== Semantic Colors (Estados y feedback del sistema) ===== */
   --color-success: var(--color-secondary-500);      /* Éxito general */
   --color-success-light: var(--color-secondary-100); /* Background éxito */
   --color-success-dark: var(--color-secondary-700);  /* Texto/border éxito */
   
   --color-warning: #f59e0b;                          /* Advertencias */
   --color-warning-light: #fef3c7;                    /* Background advertencia */
   --color-warning-dark: #d97706;                     /* Texto/border advertencia */
   
   --color-error: #ef4444;                            /* Errores */
   --color-error-light: #fecaca;                      /* Background error */
   --color-error-dark: #dc2626;                       /* Texto/border error */
   
   --color-info: #3b82f6;                             /* Información */
   --color-info-light: #dbeafe;                       /* Background info */
   --color-info-dark: #2563eb;                        /* Texto/border info */

   /* ===== Neutral Colors (Grises del sistema) ===== */
   --color-white: #ffffff;      /* Blanco puro */
   --color-black: #000000;      /* Negro puro */
   
   /* Escala de grises optimizada para legibilidad */
   --color-gray-50: #f9fafb;    /* Background principal */
   --color-gray-100: #f3f4f6;   /* Background alternativo */
   --color-gray-200: #e5e7eb;   /* Borders sutiles */
   --color-gray-300: #d1d5db;   /* Borders normales */
   --color-gray-400: #9ca3af;   /* Iconos/elementos deshabilitados */
   --color-gray-500: #6b7280;   /* Texto secundario */
   --color-gray-600: #4b5563;   /* Texto normal */
   --color-gray-700: #374151;   /* Texto importante */
   --color-gray-800: #1f2937;   /* Texto destacado */
   --color-gray-900: #111827;   /* Headings y texto crítico */

   /* ===== Property Type Badge Colors (Colores específicos del negocio) ===== */
   --color-sale: var(--color-primary-600);           /* Venta - azul confianza */
   --color-rent: var(--color-secondary-600);         /* Alquiler - verde crecimiento */
   --color-tourist: var(--color-warning);            /* Turístico - amarillo atención */
   --color-investment: #8b5cf6;                      /* Inversión - púrpura premium */
   --color-rooms: #f97316;                           /* Habitaciones - naranja energía */

   /* ===== Dark Theme Colors (Para modo oscuro) ===== */
   --dark-bg-primary: #0f172a;                       /* Background principal oscuro */
   --dark-bg-secondary: #1e293b;                     /* Background secundario oscuro */
   --dark-bg-tertiary: #334155;                      /* Background terciario */
   --dark-text-primary: #f1f5f9;                     /* Texto principal claro */
   --dark-text-secondary: #cbd5e1;                   /* Texto secundario claro */
   --dark-border: #475569;                           /* Borders en tema oscuro */

   /* ===== High Contrast Support ===== */
   --high-contrast-border: 0 0 0 2px currentColor;   /* Border para alto contraste */
   
   /* ===== Print Colors ===== */
   --print-color-black: #000000;                     /* Negro para impresión */
   --print-color-white: #ffffff;                     /* Blanco para impresión */

   /* ==========================================================================
     2. TYPOGRAPHY SYSTEM
     Sistema tipográfico escalable con fluid design
     ========================================================================== */

   /* ===== Font Families ===== */
   --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-family-secondary: Georgia, 'Times New Roman', Times, serif;
   --font-family-mono: 'Fira Code', 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', monospace;

   /* ===== Font Weights ===== */
   --font-weight-light: 300;       /* Texto delicado */
   --font-weight-normal: 400;      /* Texto normal */
   --font-weight-medium: 500;      /* Texto medio */
   --font-weight-semibold: 600;    /* Texto semi-bold */
   --font-weight-bold: 700;        /* Texto bold */
   --font-weight-extrabold: 800;   /* Texto extra-bold */

   /* ===== Fluid Font Sizes (Escalado automático con clamp) ===== */
   /* Fórmula: clamp(min-size, preferred-size, max-size) */
   /* Preferred size: base + (growth-factor * viewport-unit) */
   
   --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);      /* 12px - 14px */
   --font-size-sm: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);       /* 14px - 16px */
   --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);        /* 16px - 18px */
   --font-size-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);       /* 18px - 20px */
   --font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);        /* 20px - 24px */
   --font-size-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);         /* 24px - 30px */
   --font-size-3xl: clamp(1.875rem, 1.6rem + 1.375vw, 2.25rem);    /* 30px - 36px */
   --font-size-4xl: clamp(2.25rem, 1.9rem + 1.75vw, 3rem);         /* 36px - 48px */
   --font-size-5xl: clamp(3rem, 2.5rem + 2.5vw, 4rem);             /* 48px - 64px */
   --font-size-6xl: clamp(3.75rem, 3rem + 3.75vw, 5.5rem);         /* 60px - 88px */

   /* ===== Line Heights (Optimizadas por tipo de contenido) ===== */
   --line-height-none: 1;          /* Títulos grandes */
   --line-height-tight: 1.25;      /* Headings */
   --line-height-snug: 1.375;      /* Subtítulos */
   --line-height-normal: 1.5;      /* Texto base */
   --line-height-relaxed: 1.625;   /* Párrafos largos */
   --line-height-loose: 2;         /* Texto muy espaciado */

   /* ===== Letter Spacing ===== */
   --letter-spacing-tighter: -0.05em;  /* Títulos grandes */
   --letter-spacing-tight: -0.025em;   /* Headings */
   --letter-spacing-normal: 0em;       /* Texto normal */
   --letter-spacing-wide: 0.025em;     /* Texto espaciado */
   --letter-spacing-wider: 0.05em;     /* Labels, botones */
   --letter-spacing-widest: 0.1em;     /* Texto muy espaciado */

   /* ==========================================================================
     3. SPACING SYSTEM
     Escala de espaciado fluida y matemáticamente consistente
     ========================================================================== */

   /* ===== Fixed Spacing (Para elementos que requieren precisión) ===== */
   --space-0: 0;                   /* Sin espacio */
   --space-px: 1px;                /* 1 pixel */
   --space-0-5: 0.125rem;          /* 2px */
   --space-1: 0.25rem;             /* 4px */
   --space-1-5: 0.375rem;          /* 6px */
   --space-2: 0.5rem;              /* 8px */
   --space-2-5: 0.625rem;          /* 10px */
   --space-3: 0.75rem;             /* 12px */
   --space-3-5: 0.875rem;          /* 14px */
   --space-4: 1rem;                /* 16px */
   --space-5: 1.25rem;             /* 20px */
   --space-6: 1.5rem;              /* 24px */
   --space-7: 1.75rem;             /* 28px */
   --space-8: 2rem;                /* 32px */
   --space-10: 2.5rem;             /* 40px */
   --space-12: 3rem;               /* 48px */
   --space-16: 4rem;               /* 64px */
   --space-20: 5rem;               /* 80px */
   --space-24: 6rem;               /* 96px */
   --space-32: 8rem;               /* 128px */
   --space-40: 10rem;              /* 160px */
   --space-48: 12rem;              /* 192px */
   --space-56: 14rem;              /* 224px */
   --space-64: 16rem;              /* 256px */

   /* ===== Fluid Spacing (Escalado automático con viewport) ===== */
   /* Ideal para layouts responsivos que se adaptan automáticamente */
   --space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);         /* 4px - 6px */
   --space-sm: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);            /* 8px - 12px */
   --space-md: clamp(1rem, 0.8rem + 1vw, 1.5rem);                 /* 16px - 24px */
   --space-lg: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);            /* 24px - 36px */
   --space-xl: clamp(2rem, 1.6rem + 2vw, 3rem);                   /* 32px - 48px */
   --space-2xl: clamp(3rem, 2.4rem + 3vw, 4.5rem);                /* 48px - 72px */
   --space-3xl: clamp(4rem, 3.2rem + 4vw, 6rem);                  /* 64px - 96px */
   --space-4xl: clamp(5rem, 4rem + 5vw, 7.5rem);                  /* 80px - 120px */
   --space-5xl: clamp(6rem, 4.8rem + 6vw, 9rem);                  /* 96px - 144px */

   /* ==========================================================================
     4. LAYOUT SYSTEM
     Sistema de layout responsivo con contenedores y grid
     ========================================================================== */

   /* ===== Container Sizes (Breakpoints del sistema) ===== */
   --container-sm: 640px;          /* Small devices */
   --container-md: 768px;          /* Medium devices */
   --container-lg: 1024px;         /* Large devices */
   --container-xl: 1280px;         /* Extra large devices */
   --container-2xl: 1536px;        /* 2x Extra large devices */
   --container-max-width: 1200px;  /* Ancho máximo para contenido */
   
   /* ===== Container Padding (Fluido para márgenes laterales) ===== */
   --container-padding: clamp(1rem, 2vw + 0.5rem, 2rem);          /* 16px - 32px */

   /* ===== Grid System ===== */
   --grid-columns: 12;                             /* Columnas base del grid */
   --grid-gap: var(--space-md);                    /* Gap estándar */
   --grid-gap-sm: var(--space-sm);                 /* Gap pequeño */
   --grid-gap-lg: var(--space-lg);                 /* Gap grande */
   --grid-gap-xl: var(--space-xl);                 /* Gap extra grande */

   /* ===== Property Grid Specific (Para el grid de propiedades) ===== */
   --property-grid-min-width: 320px;               /* Ancho mínimo de cards */
   --property-grid-gap: var(--space-lg);           /* Separación entre cards */
   --property-grid-columns: repeat(auto-fit, minmax(var(--property-grid-min-width), 1fr));

   /* ==========================================================================
     5. BORDER SYSTEM
     Sistema consistente para radios y anchos de borde
     ========================================================================== */

   /* ===== Border Radius (Escalado armónico) ===== */
   --border-radius-none: 0;                        /* Sin radio */
   --border-radius-sm: 0.25rem;                    /* 4px - elementos pequeños */
   --border-radius-md: 0.375rem;                   /* 6px - elementos normales */
   --border-radius-lg: 0.5rem;                     /* 8px - cards, botones */
   --border-radius-xl: 0.75rem;                    /* 12px - elementos grandes */
   --border-radius-2xl: 1rem;                      /* 16px - contenedores */
   --border-radius-3xl: 1.5rem;                    /* 24px - modales */
   --border-radius-full: 9999px;                   /* Círculo perfecto */

   /* ===== Border Widths ===== */
   --border-width-0: 0;                            /* Sin borde */
   --border-width-1: 1px;                          /* Borde fino */
   --border-width-2: 2px;                          /* Borde normal */
   --border-width-4: 4px;                          /* Borde grueso */
   --border-width-8: 8px;                          /* Borde muy grueso */

   /* ==========================================================================
     6. SHADOW SYSTEM
     Sistema de elevación con sombras realistas
     ========================================================================== */

   /* ===== Basic Shadows (Elevación progresiva) ===== */
   --shadow-none: none;
   --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);                                    /* Sutil */
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* Normal */
   --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* Elevado */
   --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); /* Muy elevado */
   --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);                               /* Máxima elevación */
   --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);                            /* Hundido */

   /* ===== Colored Shadows (Para elementos de marca) ===== */
   --shadow-primary: 0 10px 25px -3px rgb(2 132 199 / 0.3);        /* Sombra azul */
   --shadow-success: 0 10px 25px -3px rgb(34 197 94 / 0.3);        /* Sombra verde */
   --shadow-warning: 0 10px 25px -3px rgb(245 158 11 / 0.3);       /* Sombra amarilla */
   --shadow-error: 0 10px 25px -3px rgb(239 68 68 / 0.3);          /* Sombra roja */

   /* ==========================================================================
     7. ANIMATION SYSTEM
     Sistema de transiciones y animaciones fluidas
     ========================================================================== */

   /* ===== Timing Functions (Curvas de animación naturales) ===== */
   --ease-linear: linear;                                           /* Movimiento constante */
   --ease-in: cubic-bezier(0.4, 0, 1, 1);                         /* Acelera al final */
   --ease-out: cubic-bezier(0, 0, 0.2, 1);                        /* Desacelera al final */
   --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);                   /* Suave en ambos extremos */
   --ease-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);           /* Efecto rebote */
   --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);         /* Rebote suave */

   /* ===== Transition Durations (Duraciones optimizadas por UX) ===== */
   --transition-fast: 150ms;                                       /* Micro-interacciones */
   --transition-base: 300ms;                                       /* Transiciones normales */
   --transition-slow: 500ms;                                       /* Transiciones complejas */
   --transition-slower: 700ms;                                     /* Transiciones dramáticas */

   /* ===== Prebuilt Transitions (Transiciones comunes) ===== */
   --transition-colors: color var(--transition-base) var(--ease-in-out),
                        background-color var(--transition-base) var(--ease-in-out),
                        border-color var(--transition-base) var(--ease-in-out);
   
   --transition-transform: transform var(--transition-base) var(--ease-in-out);
   
   --transition-all: all var(--transition-base) var(--ease-in-out);

   /* ==========================================================================
     8. Z-INDEX SYSTEM
     Sistema de capas organizadas jerárquicamente
     ========================================================================== */

   --z-index-base: 0;              /* Contenido base */
   --z-index-dropdown: 10;         /* Dropdowns y menús */
   --z-index-sticky: 20;           /* Elementos sticky */
   --z-index-fixed: 30;            /* Headers fijos */
   --z-index-modal-backdrop: 40;   /* Fondos de modales */
   --z-index-modal: 50;            /* Modales y dialogs */
   --z-index-popover: 60;          /* Popovers y tooltips */
   --z-index-tooltip: 70;          /* Tooltips específicos */
   --z-index-toast: 80;            /* Notificaciones toast */
   --z-index-lightbox: 9999;       /* Lightbox e overlays críticos */

   /* ==========================================================================
     9. COMPONENT-SPECIFIC TOKENS
     Variables específicas para componentes del sistema
     ========================================================================== */

   /* ===== Button System ===== */
   --btn-height-sm: 36px;                          /* Botón pequeño */
   --btn-height-md: 44px;                          /* Botón normal (touch-friendly) */
   --btn-height-lg: 52px;                          /* Botón grande */
   --btn-height-xl: 60px;                          /* Botón extra grande */
   
   --btn-padding-y-sm: var(--space-2);             /* Padding vertical pequeño */
   --btn-padding-y-md: var(--space-3);             /* Padding vertical normal */
   --btn-padding-y-lg: var(--space-4);             /* Padding vertical grande */
   --btn-padding-y-xl: var(--space-5);             /* Padding vertical extra */
   
   --btn-padding-x-sm: var(--space-3);             /* Padding horizontal pequeño */
   --btn-padding-x-md: var(--space-4);             /* Padding horizontal normal */
   --btn-padding-x-lg: var(--space-6);             /* Padding horizontal grande */
   --btn-padding-x-xl: var(--space-8);             /* Padding horizontal extra */

   /* ===== Form System ===== */
   --form-input-height: 44px;                      /* Altura estándar inputs */
   --form-input-padding-x: var(--space-3);         /* Padding horizontal inputs */
   --form-input-padding-y: var(--space-2-5);       /* Padding vertical inputs */
   --form-textarea-min-height: 120px;              /* Altura mínima textareas */
   --form-focus-ring: 0 0 0 3px rgb(14 165 233 / 0.1); /* Ring de focus */

   /* ===== Property Cards ===== */
   --property-card-min-width: var(--property-grid-min-width); /* Ancho mínimo */
   --property-card-aspect-ratio: 16 / 10;          /* Aspecto imagen principal */
   --property-card-border-radius: var(--border-radius-lg);    /* Radio de cards */
   --property-card-shadow: var(--shadow-sm);       /* Sombra normal */
   --property-card-shadow-hover: var(--shadow-lg); /* Sombra en hover */
   --property-card-transform-hover: translateY(-4px); /* Elevación en hover */

   /* ===== Property Filters ===== */
   --property-filter-bg: var(--color-white);       /* Background filtros */
   --property-filter-border: var(--color-gray-200); /* Border filtros */
   --property-filter-radius: var(--border-radius-lg); /* Radio filtros */
   --property-filter-padding: var(--space-lg);     /* Padding interno */
   --property-filter-gap: var(--space-md);         /* Gap entre elementos */

   /* ===== Property Meta ===== */
   --property-meta-bg: var(--color-gray-50);       /* Background meta info */
   --property-meta-border: var(--color-gray-200);  /* Border meta info */
   --property-meta-padding: var(--space-lg);       /* Padding meta info */
   --property-meta-gap: var(--space-lg);           /* Gap meta items */
   --property-meta-min-width: 200px;               /* Ancho mínimo items */

   /* ===== Navigation ===== */
   --nav-height: 80px;                             /* Altura navegación */
   --nav-padding: var(--space-lg);                 /* Padding navegación */
   --nav-gap: var(--space-lg);                     /* Gap elementos nav */

   /* ===== Header ===== */
   --header-bg: var(--color-white);                /* Background header */
   --header-border: var(--color-gray-200);         /* Border header */
   --header-padding: var(--space-lg);              /* Padding header */

   /* ===== Footer ===== */
   --footer-bg: var(--color-gray-900);             /* Background footer */
   --footer-color: var(--color-white);             /* Color texto footer */
   --footer-padding: var(--space-2xl);             /* Padding footer */

   /* ===== Breadcrumbs ===== */
   --breadcrumbs-bg: var(--color-white);           /* Background breadcrumbs */
   --breadcrumbs-border: var(--color-gray-200);    /* Border breadcrumbs */
   --breadcrumbs-padding: var(--space-md);         /* Padding breadcrumbs */
   --breadcrumbs-gap: var(--space-sm);             /* Gap elementos breadcrumbs */

   /* ===== Property Actions ===== */
   --property-actions-gap: var(--space-xl);        /* Gap acciones */
   --property-actions-bg: var(--color-white);      /* Background acciones */
   --property-actions-border: var(--color-gray-200); /* Border acciones */
   --property-actions-padding: var(--space-xl);    /* Padding acciones */
   --property-actions-radius: var(--border-radius-lg); /* Radio acciones */

   /* ===== Lightbox ===== */
   --lightbox-bg: rgba(0, 0, 0, 0.8);              /* Background lightbox */
   --lightbox-z-index: var(--z-index-lightbox);    /* Z-index lightbox */

   /* ===== Amenities ===== */
   --amenities-grid-min-width: 250px;              /* Ancho mínimo amenities */
   --amenities-gap: var(--space-sm);               /* Gap amenities */

   /* ===== Feature Badges ===== */
   --feature-badge-bg: var(--color-primary-100);   /* Background badges */
   --feature-badge-color: var(--color-primary-800); /* Color texto badges */
   --feature-badge-padding-x: var(--space-sm);     /* Padding horizontal badges */
   --feature-badge-padding-y: var(--space-xs);     /* Padding vertical badges */

   /* ===== Focus System (Accesibilidad) ===== */
   --focus-ring-width: 3px;                        /* Ancho ring focus */
   --focus-ring-color: rgb(14 165 233 / 0.6);      /* Color ring focus */
   --focus-ring: 0 0 0 var(--focus-ring-width) var(--focus-ring-color); /* Ring completo */
   --focus-ring-offset: 2px;                       /* Separación ring */

   /* ==========================================================================
     10. DARK THEME TOKENS
     Variables específicas para el modo oscuro
     ========================================================================== */

   /* ===== Dark Theme Text Colors ===== */
   --dark-text-primary: #ffffff;                   /* Texto principal claro */
   --dark-text-secondary: #e5e5e5;                 /* Texto secundario */
   --dark-text-muted: #a3a3a3;                     /* Texto desenfatizado */

   /* ===== Dark Theme Component Overrides ===== */
   --dark-card-bg: var(--dark-bg-secondary);       /* Background cards oscuro */
   --dark-input-bg: var(--dark-bg-tertiary);       /* Background inputs oscuro */
   --dark-border-color: var(--dark-border);        /* Color border oscuro */

}

/* ==========================================================================
   11. RESPONSIVE CUSTOM PROPERTIES
   Ajustes de variables por breakpoint para optimización
   ========================================================================== */

/* ===== Small Devices (min-width: 480px) ===== */
@media (min-width: 480px) {
   :root {
      --container-padding: clamp(1.25rem, 2.5vw, 1.75rem);
   }
}

/* ===== Medium Devices (min-width: 768px) ===== */
@media (min-width: 768px) {
   :root {
      --container-padding: clamp(1.5rem, 3vw, 2.5rem);
      --property-grid-gap: var(--space-xl);
      --nav-gap: var(--space-xl);
      --header-padding: var(--space-xl);
   }
}

/* ===== Large Devices (min-width: 1024px) ===== */
@media (min-width: 1024px) {
   :root {
      --container-padding: clamp(2rem, 4vw, 3rem);
      --property-actions-gap: var(--space-2xl);
      --footer-padding: var(--space-3xl);
      --nav-height: 90px;
   }
}

/* ===== Extra Large Devices (min-width: 1280px) ===== */
@media (min-width: 1280px) {
   :root {
      --container-padding: clamp(2.5rem, 5vw, 4rem);
      --property-grid-gap: var(--space-2xl);
   }
}

/* ===== 2X Extra Large Devices (min-width: 1536px) ===== */
@media (min-width: 1536px) {
   :root {
      --container-padding: clamp(3rem, 6vw, 5rem);
   }
}

/* ==========================================================================
   12. ACCESSIBILITY PREFERENCE SUPPORT
   Adaptación automática a preferencias del usuario
   ========================================================================== */

/* ===== Reduced Motion Support ===== */
@media (prefers-reduced-motion: reduce) {
   :root {
      /* Eliminar todas las transiciones para usuarios sensibles al movimiento */
      --transition-fast: 0ms;
      --transition-base: 0ms;
      --transition-slow: 0ms;
      --transition-slower: 0ms;
      
      /* Mantener funcionalidad pero sin efectos visuales */
      --property-card-transform-hover: none;
   }
}

/* ===== High Contrast Mode Support ===== */
@media (prefers-contrast: high) {
   :root {
      /* Aumentar contrastes para usuarios con problemas de visión */
      --border-width-1: 2px;
      --border-width-2: 3px;
      --focus-ring-width: 4px;
      
      /* Eliminar sombras sutiles que pueden reducir contraste */
      --shadow-sm: none;
      --shadow-md: var(--high-contrast-border);
      --shadow-lg: var(--high-contrast-border);
      
      /* Mejorar visibilidad de elementos interactivos */
      --property-card-shadow: var(--high-contrast-border);
   }
}

/* ===== Reduced Data Support ===== */
@media (prefers-reduced-data: reduce) {
   :root {
      /* Optimizar para conexiones lentas */
      --transition-fast: 0ms;
      --transition-base: 50ms;
      --transition-slow: 100ms;
      
      /* Reducir efectos que requieren recursos */
      --shadow-lg: var(--shadow-sm);
      --shadow-xl: var(--shadow-md);
      --shadow-2xl: var(--shadow-lg);
   }
}

/* ==========================================================================
   13. PRINT STYLE TOKENS
   Variables optimizadas para impresión
   ========================================================================== */

@media print {
   :root {
      /* Convertir colores a escala de grises para impresión económica */
      --color-primary-600: var(--print-color-black);
      --color-secondary-600: var(--print-color-black);
      --color-gray-900: var(--print-color-black);
      --color-white: var(--print-color-white);
      
      /* Eliminar sombras innecesarias para impresión */
      --shadow-sm: none;
      --shadow-md: none;
      --shadow-lg: none;
      --shadow-xl: none;
      --shadow-2xl: none;
      
      /* Optimizar espaciado para papel */
      --space-2xl: var(--space-xl);
      --space-3xl: var(--space-2xl);
      
      /* Simplificar bordes para impresión */
      --border-radius-lg: var(--border-radius-sm);
      --border-radius-xl: var(--border-radius-md);
   }
}

/* ==========================================================================
   14. CUSTOM PROPERTY FALLBACKS
   Valores de respaldo para compatibilidad
   ========================================================================== */

/* Para navegadores que no soporten clamp(), proporcionar fallbacks */
@supports not (width: clamp(1rem, 5vw, 3rem)) {
   :root {
      /* Fallbacks para typografía */
      --font-size-base: 1rem;
      --font-size-lg: 1.125rem;
      --font-size-xl: 1.25rem;
      --font-size-2xl: 1.5rem;
      --font-size-3xl: 1.875rem;
      --font-size-4xl: 2.25rem;
      
      /* Fallbacks para espaciado */
      --space-xs: 0.25rem;
      --space-sm: 0.5rem;
      --space-md: 1rem;
      --space-lg: 1.5rem;
      --space-xl: 2rem;
      --space-2xl: 3rem;
      
      /* Fallbacks para layout */
      --container-padding: 1rem;
   }
}

/* ==========================================================================
   15. DEBUGGING HELPERS
   Variables para desarrollo y debug (eliminar en producción)
   ========================================================================== */

:root {
   /* Colores para debug visual durante desarrollo */
   --debug-red: #ff0000;
   --debug-green: #00ff00;
   --debug-blue: #0000ff;
   --debug-yellow: #ffff00;
   --debug-purple: #ff00ff;
   --debug-cyan: #00ffff;
   
   /* Grid overlay para debugging responsive */
   --debug-grid-color: rgba(255, 0, 0, 0.1);
   --debug-grid-size: 20px;
}

/* Clase helper para mostrar grid de debug */
.debug-grid {
   background-image: 
      linear-gradient(var(--debug-grid-color) 1px, transparent 1px),
      linear-gradient(90deg, var(--debug-grid-color) 1px, transparent 1px);
   background-size: var(--debug-grid-size) var(--debug-grid-size);
}

/* ==========================================================================
   END OF ROOT VARIABLES
   Total variables definidas: 200+
   Mantenedor: InmoIzan Development Team
   Última actualización: 2025
   ========================================================================== */