/* InmoLight Pro - Design System */
/* Based on Premium Architectural Minimalist / Lumina Realty */

:root {
    /* Paleta de Colores Principal */
    --color-primary: #1E1E1E;
    --color-primary-container: #1E1E1E;
    --color-on-primary: #FFFFFF;
    
    --color-secondary: #E8DCC3;
    --color-secondary-container: #ebdfc5;
    --color-on-secondary-container: #6a624e;
    
    --color-tertiary: #2E4A47;
    --color-tertiary-container: #042220;
    --color-on-tertiary-container: #6e8b88;
    
    --color-background: #F3F3F3;
    --color-surface: #FFFFFF;
    --color-on-surface: #1A1C1C;
    --color-on-surface-variant: #444748;
    
    --color-outline: #747878;
    --color-outline-variant: #C4C7C7;
    
    --color-error: #BA1A1A;
    --color-whatsapp: #25D366;

    /* Tipografía */
    --font-family: 'Montserrat', sans-serif;
    
    /* Font Sizes */
    --fs-display-lg: 48px;
    --fs-display-mobile: 32px;
    --fs-headline-md: 24px;
    --fs-headline-sm: 20px;
    --fs-body-lg: 18px;
    --fs-body-md: 16px;
    --fs-caption: 14px;
    --fs-label: 12px;

    /* Espaciado (Sistema de 8px) */
    --space-xs: 4px;
    --space-base: 8px;
    --space-sm: 12px;
    --space-md: 24px;
    --space-lg: 48px;
    --space-xl: 80px;
    
    --gutter: 24px;
    --margin-mobile: 20px;
    --margin-desktop: 64px;

    /* Bordes y Formas */
    --radius-sm: 2px;
    --radius-default: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;

    /* Sombras y Elevación */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
}

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    background-color: var(--color-background);
    color: var(--color-on-surface);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-primary);
    font-weight: 700;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
}

button {
    font-family: var(--font-family);
    cursor: pointer;
    border: none;
    background: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--margin-mobile);
}

@media (min-width: 768px) {
    .container {
        padding: 0 var(--margin-desktop);
    }
}

/* Utilities */
.text-primary { color: var(--color-primary); }
.text-muted { color: var(--color-on-surface-variant); }
.bg-surface { background-color: var(--color-surface); }
.border-b { border-bottom: 1px solid var(--color-outline-variant); }