/* =========================================================
   Ser Como Jesús — TOKENS
   =========================================================

   FUENTE ÚNICA de color, forma, tipografía y ritmo. La usan el front
   (app.css) y el panel (admin.css), y ninguno de los dos declara un valor
   por su cuenta.

   No es una separación estética. El panel tenía su propio juego reducido
   —--a, --soft, --line— escrito a mano en un <style> de PHP, y ya había
   DIVERGIDO en silencio: el borde del panel era #e2e6e3 y el del front
   #e4e8e4. Nadie decidió esa diferencia; apareció sola. Dos fuentes para un
   mismo número siempre acaban así, y la que se queda vieja no avisa.

   Se encola como hoja propia y las otras dependen de ella, en vez de con
   @import: @import bloquea la pintura y esconde la dependencia de
   WordPress, que es quien debe saber el orden.
   ========================================================= */

:root{
  /* Crema naranja del tablón: distingue los avisos del resto del dashboard
     sin gritar. Con su tinta apagada propia, porque --mv-ink-3 sobre este
     fondo da 4.23:1 y el mínimo para texto pequeño es 4.5. */
  --mv-aviso-bg:#fdf5ec;
  --mv-aviso-ink-3:#5f6a62;
  --mv-danger:#b3453d;
  /* Verde de marca oscurecido para el contador de avisos: el de los botones
     da 3.71:1 con blanco y un número de 11px necesita 4.5. Éste da 7.33. */
  --mv-badge:#4a5a4e;
  /* Marca */
  --mv-accent:#a1b1a4;
  --mv-accent-dark:#77897c;
  --mv-accent-ink:#5f7264;
  --mv-accent-soft:#eef1ee;
  --mv-on-accent:#ffffff;   /* texto sobre el verde de marca; NO se redefine en oscuro */
  /* El acento con alfa, para anillos de foco. Escrito una vez: en wp-login
     estaba como rgba(161,177,164,.35), que es este mismo color en decimal. */
  --mv-focus-ring:rgba(161,177,164,.35);
  /* El mismo recurso con el verde oscuro, para el foco de los botones del
     panel. Estaba como rgba(119,137,124,.5): #77897c en decimal. */
  --mv-focus-ring-fuerte:rgba(119,137,124,.5);

  /* Superficies claro */
  --mv-bg:#f9f9f9;
  --mv-surface:#ffffff;
  --mv-surface-2:#fbfcfb;
  --mv-line:#e4e8e4;
  --mv-line-strong:#d3dad4;

  /* Texto claro */
  --mv-ink:#101613;
  --mv-ink-2:#465049;
  --mv-ink-3:#6f7871;   /* 4.56:1 sobre blanco; #7c857e daba 3.81 */

  /* Estado */
  --mv-ok:#4f7f5f;
  --mv-warn:#a8802f;
  --mv-err:#b4483c;

  /* Paleta categórica de las estaciones de la vía y de las donas del panel.
     Siete tonos que sólo DISTINGUEN, no jerarquizan. Son identidad, igual que
     el verde de marca: colores sólidos con texto blanco encima que se leen
     igual sobre tarjeta clara u oscura, así que NO se redefinen en oscuro. Son
     invariantes declarados en 07-tokens-oscuro.pl, con ese motivo. */
  --mv-tono-verde:#7f9a5c;
  --mv-tono-azul:#7fa8d0;
  --mv-tono-rojo:#c9524a;
  --mv-tono-morado:#9b6fa8;
  --mv-tono-naranja:#e08a3c;
  --mv-tono-rosa:#c98aae;
  --mv-tono-oliva:#8d9b4a;
  /* Texto tenue sobre el negro del reproductor de video. El video es siempre
     oscuro, así que este gris no responde al tema (invariante). */
  --mv-player-ink:#dfe5e1;

  /* Forma */
  --mv-r-sm:10px;
  --mv-r:14px;
  --mv-r-lg:20px;
  --mv-r-xl:28px;

  /* Elevación (suave, casi plana) */
  --mv-shadow:0 1px 2px rgba(16,22,19,.04);
  --mv-shadow-lg:0 18px 44px -28px rgba(16,22,19,.24);

  /* Tipografía */
  --mv-font:"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Helvetica Neue","Lato",Helvetica,Arial,sans-serif;
  --mv-fs-xs:12px;
  --mv-fs-sm:13.5px;
  --mv-fs-base:15px;
  --mv-fs-lg:17px;
  --mv-fs-h3:19px;
  --mv-fs-h2:22px;
  --mv-fs-h1:26px;

  /* Ritmo */
  --mv-gap:16px;
  --mv-pad:20px;
  --mv-ease:cubic-bezier(.4,0,.2,1);
  --mv-ease-out:cubic-bezier(.2,.7,.2,1);
}

.mv-dark{
  /* En oscuro un crema claro no funciona: se invierte a un tono cálido bajo. */
  --mv-aviso-bg:#2a231d;
  --mv-aviso-ink-3:#9aa49d;
  --mv-danger:#e08b83;
  --mv-badge:#8fa694;
  --mv-bg:#0f1211;
  --mv-surface:#171b19;
  --mv-surface-2:#1d2220;
  --mv-line:#272d29;
  --mv-line-strong:#333b36;
  --mv-ink:#f0f2f0;
  --mv-ink-2:#b3bcb6;
  --mv-ink-3:#7e8882;
  --mv-accent-soft:#212824;
  --mv-accent-ink:#b9c8bc;
  --mv-shadow:0 1px 2px rgba(0,0,0,.3);
  --mv-shadow-lg:0 18px 44px -26px rgba(0,0,0,.6);

  /* ---- Estado en oscuro ----
     Los valores claros heredaban tal cual y no llegaban: --mv-ok daba 3.76:1
     sobre esta superficie y --mv-err 3.26:1, con el mínimo en 4.5 para texto
     pequeño. Cada uno de estos está MEDIDO sobre --mv-surface #171b19, con
     margen deliberado hasta ~5:1 para que el redondeo no lo tire por debajo.
     Se conserva el tono: es el mismo color, subido de luminosidad. */
  --mv-ok:#5d9670;            /* 5.02:1 sobre surface */
  --mv-err:#cc7065;           /* 5.03:1 sobre surface */
  /* --mv-warn NO se redefine: #a8802f ya da 4.80:1 aquí. Cambiar un color que
     mide bien es tocar la paleta sin motivo. Está declarado como invariante en
     pruebas/estaticos/07-tokens-oscuro.pl, con esa medición por motivo. */

  /* --mv-disabled y las cuatro píldoras NO van aquí: se declaran en el
     .mv-dark del final del archivo. Ver el porqué allí. */
}

/* ---- Píldoras de estado del panel ----
   Su contraste está medido y no coincide con --mv-ok/--mv-warn, que son para
   texto sobre superficie clara. Entran como tokens propios en vez de quedarse
   escritos a mano dentro del CSS del panel: es exactamente el caso que hizo
   divergir el borde. */
:root{
  --mv-pill-ok-bg:#e8f2ea;
  --mv-pill-ok-ink:#3f6b4d;
  --mv-pill-warn-bg:#fdf3e3;
  --mv-pill-warn-ink:#8a6420;
  --mv-disabled:#c3cdc6;
}

/* ---- Las píldoras y el deshabilitado, en oscuro ----
   ESTE BLOQUE VA DESPUÉS DEL :root DE ARRIBA Y NO ES UN DETALLE DE ESTILO.

   `:root` y `.mv-dark` pesan lo mismo —(0,1,0) los dos— y se aplican al MISMO
   elemento, <html>. Con la especificidad empatada decide el orden del archivo:
   gana el último. Así que estos cinco tokens estaban declarados en el .mv-dark
   de arriba y el `:root` de las píldoras, que viene después, los devolvía a su
   valor claro. El archivo se leía correcto y el navegador servía #e8f2ea —un
   rectángulo casi blanco— en tema oscuro.

   Lo cazó medir los tokens resueltos en un navegador, no leer el CSS. Lo
   vigila ahora 07-tokens-oscuro.pl, que compara el ORDEN además de la
   presencia.

   Los valores están medidos: la tinta contra SU PROPIA píldora, que es sobre
   lo que se lee; y el fondo contra --mv-bg, para que se distinga del panel sin
   deslumbrar. --mv-disabled no persigue el 4.5 a propósito —está apagado
   porque tiene que estarlo— y lo que conserva es su peso relativo: 1.63:1 en
   claro sobre blanco, 1.61:1 aquí sobre la superficie oscura. */
.mv-dark{
  --mv-pill-ok-bg:#223c27;
  --mv-pill-ok-ink:#7eb38f;   /* 5.35:1 sobre su píldora */
  --mv-pill-warn-bg:#4d3105;
  --mv-pill-warn-ink:#d39f41; /* 4.87:1 sobre su píldora */
  --mv-disabled:#354038;      /* 1.61:1 sobre surface */
}

/* El ritmo entre bloques hermanos del escritorio. Es un token de espacio como
   los de arriba, aunque sólo lo use una vista. */
:root{--mv-bloque:30px;}

/* En pantallas estrechas cambian el ritmo y los titulares. Van aquí y no en
   app.css: siguen siendo declaraciones de token, y la promesa es que TODAS
   viven en este archivo. */
@media (max-width:680px){
  :root{--mv-pad:16px;--mv-gap:12px;--mv-fs-h1:23px;--mv-fs-h2:20px;}
}