/* ============================================================
   VARIABLES. GTR AutoParts · "Telemetria"
   Grafito casi negro, paneles de instrumento, rojo laser de acento.
   Los datos (CV, Nm, kg, dB) siempre en mono: son lecturas, no texto.
   ============================================================ */
:root {
    /* Fondos: del negro de pista al panel de instrumentos */
    --negro:        #060708;
    --grafito:      #0b0d10;
    --panel:        #111419;
    --panel-2:      #171b21;
    --panel-3:      #1e232b;
    --linea:        #242a33;
    --linea-suave:  rgba(255,255,255,0.06);

    /* Escenario claro para las fotos de producto (fondo blanco de fabrica) */
    --escenario:    #eef0f3;
    --escenario-2:  #dfe3e8;

    /* Texto */
    --blanco:       #f5f7fa;
    --texto:        #c3cad4;
    --texto-suave:  #8b94a1;
    --texto-tenue:  #7a8490;   /* >= 4,6:1 sobre todos los fondos (antes #5c6572: 3,1-3,4, no pasaba WCAG AA) */

    /* Acento: rojo laser GTR */
    --rojo:         #ff2d2d;
    --rojo-vivo:    #ff4d4d;
    --rojo-oscuro:  #c41616;
    --rojo-halo:    rgba(255,45,45,0.35);
    --rojo-fondo:   rgba(255,45,45,0.10);
    --rojo-boton:   #e01e1e;   /* fondo con texto blanco: 4,7:1 (el rojo de marca da 3,7 y no llega a WCAG AA) */
    --rojo-boton-2: #c81a1a;   /* su hover: mas oscuro, no mas claro */

    /* Lecturas secundarias */
    --verde-dato:   #39d98a;
    --ambar-dato:   #ffb547;

    /* Tipografia */
    --f-titulo: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
    --f-texto:  'Inter', 'Segoe UI', system-ui, sans-serif;
    --f-dato:   'JetBrains Mono', ui-monospace, Consolas, monospace;

    --t-xs: 0.75rem;   --t-s: 0.875rem;  --t-m: 1rem;     --t-l: 1.125rem;
    --t-xl: 1.375rem;  --t-2xl: 1.75rem; --t-3xl: 2.375rem; --t-4xl: clamp(2.4rem, 5.2vw, 4.4rem);

    /* Espacios y forma */
    --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 72px; --e-9: 112px;
    --radio: 14px; --radio-s: 8px; --radio-xs: 4px;
    --ancho: 1320px;
    --cabecera: 72px;

    /* Efectos */
    --sombra:   0 20px 50px -20px rgba(0,0,0,0.75);
    --halo:     0 0 0 1px var(--rojo), 0 0 24px var(--rojo-halo);
    --cristal:  rgba(11,13,16,0.72);
    --rejilla:  linear-gradient(var(--linea-suave) 1px, transparent 1px), linear-gradient(90deg, var(--linea-suave) 1px, transparent 1px);
    --curva:    cubic-bezier(.2,.7,.2,1);
}