/* ==========================================================================
   tokens.css — Variables de diseño tomadas de design-spec.json
   Fuente de verdad para colores, tipografía, espaciado, radios y sombras.
   ========================================================================== */

:root {
    /* Colores */
    --navy-900: #001040;
    --navy-800: #002060; /* primario */
    --navy-700: #013a8c;
    --navy-600: #00307a;
    --blue-impomac: #015fa0;
    --cyan-500: #01AEED; /* acento */
    --cyan-400: #33c1f0;
    --lime-500: #CADF21;
    --amber-solar: #F5A623;
    --white: #FFFFFF;
    --bg-light: #F4F6F9;
    --bg-card: #FFFFFF;
    --text-dark: #1A2436;
    --text-body: #444B57;
    --text-muted: #7A8495;
    --border: #E3E8EF;
    --whatsapp-green: #25D366;
    --success: #27AE60;

    /* Gradientes */
    --hero-solar: linear-gradient(135deg, #002060 0%, #013a8c 50%, #01AEED 100%);
    --card-gaethan: linear-gradient(160deg, #002060 0%, #00307a 100%);
    --card-impomac: linear-gradient(160deg, #013a6a 0%, #015fa0 100%);
    --divider-tricolor: linear-gradient(to bottom, #002060, #01AEED, #CADF21);
    --btn-cotizacion: linear-gradient(135deg, #01AEED 0%, #33c1f0 100%);

    /* Tipografía */
    --font-family: 'Segoe UI', 'Inter', Arial, sans-serif;

    /* Espaciado (escala px) */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 32px;
    --sp-8: 40px;
    --sp-9: 50px;
    --sp-10: 60px;
    --sp-11: 80px;

    /* Radios */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-pill: 50px;
    --radius-circle: 50%;

    /* Sombras */
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 8px 24px rgba(0, 32, 96, 0.14);
    --shadow-header: 0 2px 8px rgba(0, 0, 0, 0.08);

    /* Layout */
    --container-max: 1280px;
}