/* S27-LAYER */
@layer wp, tokens, base, layout, components, sections, utilities;
@layer tokens {
/* ============================================================
   AVN Networks — DESIGN TOKENS (fuente unica, S26 Fase 1.2)
   Cargado primero (handle avn-tokens). PROHIBIDO usar valor de respaldo en var():
   todo token usado debe existir aqui (gate s26 arquitectura).
   ============================================================ */
:root {
    /* --- Color: marca --- */
    --avn-accent:        #00d9ff;   /* cyan unico (decision S26: #00d9ff x25 vs #00d4ff x5) */
    --avn-accent-2:      #a855f7;
    --avn-accent-green:  #00c864;
    --avn-danger:        #ef4444;
    --avn-whatsapp:      #25d366;

    /* --- Color: superficies (dark) + par de texto --- */
    --avn-bg:            #060d1f;
    --avn-bg-card:       #0a1628;
    --avn-bg-card-2:     #0f1535;
    --avn-surface-3:     #1a2540;
    --avn-on-surface:        #f5f7fa;
    --avn-text:              rgba(255,255,255,0.88);
    --avn-text-muted:        rgba(255,255,255,0.72);
    --avn-border:            rgba(0,217,255,0.18);
    --avn-border-subtle:     rgba(255,255,255,0.08);

    /* --- Color: superficie clara + par de texto (secciones light) --- */
    --avn-surface-light:     #ffffff;
    --avn-on-light:          #0a1628;
    --avn-on-light-muted:    #3b4660;
    --avn-accent-on-light:   #0077a3;   /* cyan legible sobre blanco (AA) */

    /* --- Alias legacy (Fase 2: renombrar usos y eliminar) --- */
    --avn-cyan:          var(--avn-accent);
    --avn-gray-1:        var(--avn-bg-card);
    --avn-gray-2:        var(--avn-bg-card-2);
    --avn-gray-3:        var(--avn-surface-3);
    --avn-white:         var(--avn-on-surface);
    --avn-red:           var(--avn-danger);

    /* --- Tipografia --- */
    --avn-font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --avn-font-mono:     'JetBrains Mono', 'Courier New', monospace;
    --avn-fs-sm:         clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
    --avn-fs-base:       clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
    --avn-fs-lg:         clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
    --avn-fs-h3:         clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
    --avn-fs-h2:         clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
    --avn-fs-h1:         clamp(2.125rem, 1.6rem + 2.6vw, 4rem);

    /* --- Espaciado / layout --- */
    --avn-space-1: 0.25rem; --avn-space-2: 0.5rem; --avn-space-3: 1rem;
    --avn-space-4: 1.5rem;  --avn-space-5: 2rem;   --avn-space-6: 3rem;
    --avn-gap:           24px;
    --avn-max-w:         1280px;
    --avn-section-py:    80px;
    --avn-header-h:      80px;   /* medido prod S26: 80.44px desktop */
    --avn-tap-min:       44px;   /* WCAG 2.5.5 */
    --avn-radius:        12px;
    --avn-radius-sm:     8px;

    /* --- Efectos --- */
    --avn-shadow:        0 4px 24px rgba(0,0,0,0.4);
    --avn-glow:          0 0 20px rgba(0,217,255,0.15);
    --avn-transition:    0.25s ease;

    /* --- Botones --- */
    --avn-on-accent:      #000000;
    --avn-accent-hover:   #00c4e8;
    --avn-whatsapp-hover: #20bc5a;

    /* --- Motion (T4b — nivel NOTORIO) --- */
    --avn-motion-dur:     0.9s;
    --avn-motion-ease:    cubic-bezier(.16,1,.3,1);
    --avn-motion-dist:    48px;
    --avn-motion-stagger: 0.12s;
}

@media (max-width: 1024px) { :root { --avn-section-py: 60px; } }
@media (max-width: 768px)  { :root { --avn-section-py: 48px; } }
@media (max-width: 480px)  { :root { --avn-section-py: 36px; } }
}