/* =====================================================================
 * GVIA - Sistema de diseño "Premium inmobiliario moderno"
 * dvb 25/05/2026
 *
 * Define las variables CSS (design tokens) que el resto del sitio usa.
 * Cambiar aqui un valor lo propaga a todo el sistema. NO contiene
 * componentes - solo tokens.
 * ===================================================================== */

:root {

    /* =================================================================
     * Colores - paleta primaria
     * ================================================================= */
    --gv-color-primary:        #be272d;   /* Rojo GVIA */
    --gv-color-primary-hover:  #a4222a;   /* Rojo mas oscuro para hover */
    --gv-color-primary-light:  #f5e6e7;   /* Rojo casi blanco para fondos suaves */
    --gv-color-primary-dark:   #7a1a1f;   /* Rojo muy oscuro para texto sobre claro */

    /* Neutrales (escala de grises) */
    --gv-color-white:          #ffffff;
    --gv-color-gray-50:        #fafafa;
    --gv-color-gray-100:       #f5f5f5;
    --gv-color-gray-200:       #e5e5e5;
    --gv-color-gray-300:       #d4d4d4;
    --gv-color-gray-400:       #a3a3a3;
    --gv-color-gray-500:       #737373;
    --gv-color-gray-600:       #525252;
    --gv-color-gray-700:       #404040;
    --gv-color-gray-800:       #262626;
    --gv-color-gray-900:       #171717;
    --gv-color-black:          #0a0a0a;

    /* Semanticos */
    --gv-color-text:           var(--gv-color-gray-900);
    --gv-color-text-muted:     var(--gv-color-gray-500);
    --gv-color-text-light:     var(--gv-color-gray-400);
    --gv-color-bg:             var(--gv-color-white);
    --gv-color-bg-alt:         var(--gv-color-gray-50);
    --gv-color-border:         var(--gv-color-gray-200);
    --gv-color-border-strong:  var(--gv-color-gray-300);

    /* Estados */
    --gv-color-success: #10b981;
    --gv-color-warning: #f59e0b;
    --gv-color-danger:  #ef4444;
    --gv-color-info:    #3b82f6;

    /* =================================================================
     * Tipografia
     * ================================================================= */
    --gv-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                    Roboto, Helvetica, Arial, sans-serif;
    --gv-font-display: 'Inter', sans-serif;

    /* Escala (mobile-first, escalable con clamp para fluid type)
       dvb 25/05/2026 - escala subida 2x para mejor legibilidad */
    --gv-text-xs:    0.875rem;   /* 14px */
    --gv-text-sm:    1rem;       /* 16px */
    --gv-text-base:  1.125rem;   /* 18px */
    --gv-text-lg:    1.25rem;    /* 20px */
    --gv-text-xl:    1.5rem;     /* 24px */
    --gv-text-2xl:   1.75rem;    /* 28px */
    --gv-text-3xl:   2.125rem;   /* 34px */
    --gv-text-4xl:   2.625rem;   /* 42px */
    --gv-text-5xl:   clamp(2.875rem, 5.5vw, 4.25rem); /* 46-68px fluid */
    --gv-text-6xl:   clamp(3.5rem, 7vw, 5.5rem);      /* 56-88px fluid */

    /* Pesos */
    --gv-weight-normal:    400;
    --gv-weight-medium:    500;
    --gv-weight-semibold:  600;
    --gv-weight-bold:      700;
    --gv-weight-extrabold: 800;

    /* Line heights */
    --gv-leading-tight:   1.15;
    --gv-leading-snug:    1.3;
    --gv-leading-normal:  1.5;
    --gv-leading-relaxed: 1.7;

    /* Letter spacing */
    --gv-tracking-tighter: -0.04em;
    --gv-tracking-tight:   -0.02em;
    --gv-tracking-normal:  0;
    --gv-tracking-wide:    0.02em;
    --gv-tracking-wider:   0.08em;

    /* =================================================================
     * Espaciado (escala 4px)
     * ================================================================= */
    --gv-space-1:  0.25rem;   /* 4px */
    --gv-space-2:  0.5rem;    /* 8px */
    --gv-space-3:  0.75rem;   /* 12px */
    --gv-space-4:  1rem;      /* 16px */
    --gv-space-5:  1.25rem;   /* 20px */
    --gv-space-6:  1.5rem;    /* 24px */
    --gv-space-8:  2rem;      /* 32px */
    --gv-space-10: 2.5rem;    /* 40px */
    --gv-space-12: 3rem;      /* 48px */
    --gv-space-16: 4rem;      /* 64px */
    --gv-space-20: 5rem;      /* 80px */
    --gv-space-24: 6rem;      /* 96px */
    --gv-space-32: 8rem;      /* 128px */

    /* Container */
    --gv-container-sm: 640px;
    --gv-container-md: 768px;
    --gv-container-lg: 1024px;
    --gv-container-xl: 1280px;
    --gv-container-2xl: 1440px;

    /* =================================================================
     * Bordes
     * ================================================================= */
    --gv-radius-none:  0;
    --gv-radius-sm:    0.25rem;  /* 4px */
    --gv-radius:       0.5rem;   /* 8px - default */
    --gv-radius-md:    0.75rem;  /* 12px */
    --gv-radius-lg:    1rem;     /* 16px */
    --gv-radius-xl:    1.5rem;   /* 24px */
    --gv-radius-2xl:   2rem;     /* 32px */
    --gv-radius-full:  9999px;

    /* =================================================================
     * Sombras (premium, capas con profundidad)
     * ================================================================= */
    --gv-shadow-sm:  0 1px 2px 0 rgba(0,0,0,0.04);
    --gv-shadow:     0 1px 3px 0 rgba(0,0,0,0.08), 0 1px 2px 0 rgba(0,0,0,0.05);
    --gv-shadow-md:  0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);
    --gv-shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
    --gv-shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.10), 0 10px 10px -5px rgba(0,0,0,0.04);
    --gv-shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.20);

    /* Sombra rojo (para CTAs principales con presencia) */
    --gv-shadow-red:    0 4px 14px 0 rgba(190, 39, 45, 0.30);
    --gv-shadow-red-lg: 0 10px 25px -5px rgba(190, 39, 45, 0.40);

    /* =================================================================
     * Transiciones
     * ================================================================= */
    --gv-ease:          cubic-bezier(0.4, 0, 0.2, 1);
    --gv-ease-out:      cubic-bezier(0, 0, 0.2, 1);
    --gv-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

    --gv-duration-fast:   150ms;
    --gv-duration:        250ms;
    --gv-duration-slow:   400ms;

    --gv-transition:       all var(--gv-duration) var(--gv-ease);
    --gv-transition-fast:  all var(--gv-duration-fast) var(--gv-ease);
    --gv-transition-slow:  all var(--gv-duration-slow) var(--gv-ease);

    /* =================================================================
     * Z-index scale
     * ================================================================= */
    --gv-z-base:     0;
    --gv-z-dropdown: 100;
    --gv-z-sticky:   200;
    --gv-z-fixed:    300;
    --gv-z-modal:    400;
    --gv-z-toast:    500;
    --gv-z-tooltip:  600;
}