/* ============================================
   INMOBILIARIA MARAL — Variables de Diseño
   src/styles/variables.css
   Nota: Tailwind también lee estos valores desde
   el bloque <script id="tailwind-config"> en index.html
   ============================================ */

:root {
    /* ===== Colores ===== */
    --color-primary:                #004275;
    --color-secondary:              #316289;
    --color-accent:                 #7FAED8;
    --color-on-surface:             #111c2d;
    --color-on-surface-variant:     #414750;
    --color-outline-variant:        #c1c7d2;
    --color-surface:                #f9f9ff;
    --color-surface-container-low:  #f0f3ff;
    --color-surface-container-lowest: #ffffff;

    /* ===== Espaciado ===== */
    --margin-mobile:    16px;
    --margin-desktop:   48px;
    --gutter:           24px;
    --stack-sm:          8px;
    --stack-md:         16px;
    --stack-lg:         32px;
    --section-padding:  80px;
    --container-max:  1280px;

    /* ===== Tipografía ===== */
    --font-body:     'Montserrat', sans-serif;
    --font-display:  'DM Serif Display', serif;

    /* ===== Transiciones ===== */
    --transition-smooth: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    --transition-fast:   all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}