/* ============================================
   PHONATIK — Design Tokens (Brand Book v1.0)
   Fuente única de verdad para colores y vars.
   Importar este archivo en páginas que no usen
   styles.css completo (blog, verificar).
   ============================================ */

:root {
    /* Paleta oficial Brand Book */
    --navy:       #0A1628;   /* Deep Navy — color estructural principal */
    --slate:      #1A3A52;   /* Slate Blue — secundario, puente */
    --electric:   #00D4FF;   /* Electric Blue — acento, máx 20% superficie */
    --silver:     #8A9BB0;   /* Cold Silver — texto secundario, iconos */
    --white:      #FFFFFF;   /* Clean White — fondo digital, texto sobre oscuro */
    --verified:   #00C48C;   /* Verified Green — SOLO checks/confirmaciones */
    --amber:      #FFB800;   /* Alert Amber — SOLO advertencias, nunca decorativo */

    /* WhatsApp — color de marca externa, SOLO botones/íconos de contacto WA.
       Distinto de --verified: éste es el verde oficial de WhatsApp (#25D366),
       no el semáforo de verificación del sitio. */
    --whatsapp-green: #25D366;
    --whatsapp-dark:  #075E54;   /* hover de botones/íconos WA */

    /* Aliases funcionales */
    --bg-primary:   var(--navy);
    --bg-secondary: #0F2035;   /* navy levemente más claro para secciones alternas */
    --bg-card:      #112033;
    --text-primary:   var(--white);
    --text-secondary: var(--silver);
    --text-muted:     #4E6070;
    --accent:         var(--electric);
    --accent-hover:   #33DDFF;
    --gold:           var(--amber);

    --shadow-glow:  0 0 24px rgba(0, 212, 255, 0.25);
    --shadow-amber: 0 0 30px rgba(255, 184, 0, 0.2);
    --shadow-md:    0 8px 24px rgba(0, 0, 0, 0.2);
    --shadow-lg:    0 16px 40px rgba(0, 0, 0, 0.3);

    /* Warm Accent — cálido, contraste intencional contra la paleta fría.
       SOLO botón/CTA principal. No usar en iconos ni decoración. */
    --coral:        #EA580C;
    --coral-hover:  #C2410C;
    --shadow-coral: 0 8px 24px rgba(234, 88, 12, 0.35);
    --transition: 0.3s ease;
    --container: 1280px;
    --header-height: 70px;

    /* Escala de radios — 3 niveles, no valores sueltos */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;

    /* Alias backward-compat — páginas que usan --bg */
    --bg: var(--bg-secondary);
}