/* ============================================================
   SISTEMA VISUAL — Minigrip de México
   Concepto: «La capa invisible»
   Personalidad: industrial · cinematográfica · precisa · seria
   ============================================================ */

:root {
    /* --- Color: oscuridad de planta ------------------------- */
    --vacio: #05070a; /* fondo principal */
    --vacio-2: #0a0e14; /* superficie elevada */
    --vacio-3: #111823; /* tarjeta / borde sólido */
    --vacio-4: #1a2431; /* línea divisoria */

    /* --- Color: superficie clara (catálogo) ----------------- */
    --papel: #eef1f5;
    --papel-2: #ffffff;
    --papel-3: #dde3ea;
    --tinta: #0a0e14;
    --tinta-suave: #4c5a68;

    /* --- Texto sobre oscuro ---------------------------------
       Los tres tonos están medidos contra --vacio: 17.3:1, 7.9:1
       y 5.7:1. Ninguno baja del 4.5:1 que exige AA en texto pequeño,
       y las etiquetas mono son pequeñas. */
    --hielo: #e9eef4;
    --niebla: #96a3b2;
    --niebla-2: #7d8a99;

    /* --- Marca --------------------------------------------- */
    --azul: #0079b5;
    --azul-luz: #3aa9e2;
    --azul-profundo: #004f79;
    --verde: #009c42;
    --verde-luz: #35c76e;

    /* --- Semánticos ---------------------------------------- */
    --acento: var(--verde);
    --acento-frio: var(--azul-luz);
    --error: #ff6b5e;

    /* --- Tipografía ---------------------------------------- */
    --display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
    --texto: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --mono: 'Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

    /* Escala fluida */
    --t-monumental: clamp(3.2rem, 12vw, 12rem);
    --t-display: clamp(2.6rem, 7.5vw, 7.5rem);
    --t-h2: clamp(2rem, 4.6vw, 4.4rem);
    --t-h3: clamp(1.35rem, 2.1vw, 2.1rem);
    --t-h4: clamp(1.1rem, 1.4vw, 1.35rem);
    --t-cuerpo: clamp(1rem, 0.95vw, 1.125rem);
    --t-cuerpo-lg: clamp(1.1rem, 1.35vw, 1.4rem);
    --t-pequeno: 0.875rem;
    --t-micro: 0.7rem;

    /* --- Ritmo y grid -------------------------------------- */
    --ancho-max: 1560px;
    --ancho-texto: 62ch;
    --margen: clamp(1.25rem, 5vw, 5.5rem);
    --seccion: clamp(5.5rem, 13vh, 11rem);
    --gutter: clamp(1.25rem, 2.2vw, 2.5rem);

    /* --- Movimiento ---------------------------------------- */
    --ease-salida: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-suave: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-rapida: 0.28s;
    --dur-media: 0.6s;
    --dur-lenta: 1.1s;

    /* --- Otros --------------------------------------------- */
    --radio: 2px; /* nada de esquinas blandas: esto es industria */
    --borde: 1px solid var(--vacio-4);
    --nav-alto: 76px;
}

/* Zona clara: se invierten los tokens de texto para que los
   componentes funcionen sin duplicar reglas. El verde de marca se
   oscurece aquí: sobre papel el #009c42 sólo llega a 3.2:1. */
.zona-clara {
    --vacio: var(--papel);
    --vacio-2: var(--papel-2);
    --vacio-3: var(--papel-3);
    --vacio-4: #c9d2dc;
    --hielo: var(--tinta);
    --niebla: var(--tinta-suave);
    --niebla-2: #5b6875;
    --verde-luz: #006b2d;
    --acento-frio: var(--azul-profundo);

    background-color: var(--papel);
    color: var(--tinta);
}