/* Tema: tokens (colores, fuentes, radios), tonos de estado (clases tono-*)
   y estilos base. Las páginas sólo usan estas variables, nunca valores a mano. */
:root {
    --fondo: #f6f6f4;
    --superficie: #ffffff;
    --superficie-2: #fafaf9;
    --borde: #e5e4e0;
    --borde-fuerte: #d3d2cd;
    --texto: #1c1c1a;
    --texto-2: #5b5a56;
    --texto-3: #8a8985;
    /* Acento: verde profundo del logo, usado con moderación. */
    --acento: #1f6b45;
    --acento-hover: #185838;
    --acento-suave: rgba(31, 107, 69, 0.12);
    /* Fases de una petición en la cascada de la prueba de velocidad. */
    --fase-bloqueo: #d3d2cd;
    --fase-dns: #7c9bb8;
    --fase-conexion: #c9a35e;
    --fase-tls: #a58ab5;
    --fase-espera: #8fbf9f;
    --fase-descarga: #1f6b45;
    --radio: 6px;
    --fuente: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fuente-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--fuente);
    font-size: 15px;
    line-height: 1.55;
    color: var(--texto);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--acento);
}

h1,
h2,
h3,
h4 {
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.01em;
}

h1 {
    font-size: 1.6rem;
    line-height: 1.25;
}

h2 {
    font-size: 1.2rem;
    line-height: 1.3;
}

h3 {
    font-size: 1rem;
}

h4 {
    font-size: 0.9rem;
}

code,
pre,
.mono {
    font-family: var(--fuente-mono);
    font-size: 0.86em;
}

/* --- ESTADOS ---
   Cada página traduce sus estados a uno de estos tonos (clases tono-*), que
   usan los chips, las métricas y los recuadros. */
:root {
    --error: #9b3b32;
    --error-fondo: #f7eeec;
    --error-borde: #e8cfca;
}

.tono-verde {
    --tono: #2f6b4a;
    --tono-fondo: #ecf3ee;
}

.tono-rojo {
    --tono: var(--error);
    --tono-fondo: var(--error-fondo);
}

.tono-naranja {
    --tono: #8a5a14;
    --tono-fondo: #f6efe2;
}

.tono-azul {
    --tono: #3d5a78;
    --tono-fondo: #ebf0f5;
}

.tono-gris {
    --tono: #6b6a66;
    --tono-fondo: #efeeeb;
}