/* ============================================================
   MARCA — El "panel de control" visual del sitio, versión 2.
   Todo lo que se ve (colores, tamaños, espacios) se define aquí.
   Cambiar un valor acá lo cambia en TODO el sitio de una vez.

   NEGRO, BLANCO Y AMARILLO (19-10-2026). Sale del manual de marca
   versión 2 (documentos/manual-de-marca/), que Sergio aprobó con
   «me gusta, ahora cambia todo el sitio completo en base a esto».
   Reemplazó a la paleta cálida de la versión 1 (crema, terracota y
   verde salvia), que hoy es la combinación que más delata un diseño
   hecho en serie. Proporción: blanco y niebla 60%, negro y grafito
   30%, amarillo 10%.

   ⚠️ css/tokens.css (versión 1) NO se borró: la siguen usando las
   propuestas que se envían a clientes (api/enviar.js las arma con
   ese archivo), la ficha de ingreso y los documentos. Pasarlos a la
   versión 2 es otro trabajo, con su propio OK. El panel usa este
   archivo desde el 20-10-2026, salvo la hoja de la propuesta (ver el
   final de panel/panel.css).

   Los nombres de rol (--color-acento, --color-superficie, ...) se
   mantienen para que styles.css, articulo.css y calculadora.css
   sigan funcionando; lo que cambia es el color que hay detrás.
   ============================================================ */

:root {

  /* --- LA PALETA ---
     Contraste medido contra el blanco (WCAG): negro 18,9:1;
     grafito 7,5:1; verde 5,0:1; rojo 5,6:1. Negro sobre amarillo
     13,2:1. ⚠️ El amarillo sobre blanco da 1,4:1: NUNCA va como
     letra ni como línea sobre fondo claro, solo detrás del negro
     (el destacador) o sobre negro (botones y enlaces del pie). */
  --color-negro:           #111111;
  --color-blanco:          #FFFFFF;
  --color-amarillo:        #FFD400;
  --color-amarillo-oscuro: #E6BF00;  /* el botón amarillo al pasar el mouse */
  --color-amarillo-palido: #FFF4BF;  /* la caja de aviso */
  --color-grafito:         #555555;  /* texto secundario: 7,5:1 sobre blanco, 6,7:1 sobre niebla */
  --color-niebla:          #F2F2F2;  /* el fondo que alterna con el blanco */
  --color-cuadricula:      #E4E4E4;  /* líneas finas y la cuadrícula del cuaderno */
  --color-gris-claro:      #BBBBBB;  /* texto secundario sobre negro: 9,8:1 */

  /* --- LOS ROLES ---
     Los mismos nombres de la versión 1. El acento ya no es un color
     aparte: es el negro, y el amarillo marca lo que importa. */
  --color-primario:        var(--color-negro);    /* titulares y texto fuerte */
  --color-superficie:      var(--color-negro);    /* franjas oscuras y pie */
  --color-acento:          var(--color-negro);    /* botones, enlaces, números de paso */
  --color-acento-oscuro:   var(--color-grafito);  /* el negro al pasar el mouse */
  --color-acento-claro:    var(--color-amarillo); /* el acento SOBRE NEGRO, nunca sobre blanco */
  --color-salvia:          var(--color-grafito);  /* el tono de apoyo: líneas de flujos, barras */

  --color-texto:     var(--color-negro);
  --color-texto-sec: var(--color-grafito);
  --color-fondo:     var(--color-blanco);
  --color-fondo-alt: var(--color-niebla);
  --color-tarjeta:   var(--color-blanco);
  --color-borde:     var(--color-cuadricula);
  --color-exito:     #1E7F4F;  /* 5,0:1 sobre blanco */
  --color-error:     #C62828;  /* 5,6:1 sobre blanco */

  /* --- TIPOGRAFÍAS ---
     Se declaran en css/letras.css y se sirven desde fuentes/.
     Los «reemplazo» son Arial ajustada para medir lo mismo mientras
     cargan (ver el final de letras.css). */
  --fuente-titulos: 'Jost', 'Jost reemplazo', 'Segoe UI', system-ui, sans-serif;
  --fuente-texto:   'Jost', 'Jost reemplazo', 'Segoe UI', system-ui, sans-serif;
  /* Solo la palabra firma: una por página, en el título principal. */
  --fuente-firma:   'Julius Sans One', 'Julius reemplazo', 'Segoe UI', system-ui, sans-serif;
  /* Solo los números del cuaderno. */
  --fuente-mano:    'Kalam', 'Segoe Print', 'Comic Sans MS', cursive;

  /* --- TAMAÑOS DE TEXTO ---
     Los que dicen clamp() se achican y agrandan solos según la pantalla. */
  --texto-sm:   0.9rem;
  --texto-base: 1rem;      /* texto normal: 16px, nunca menos */
  --texto-lg:   1.125rem;
  --texto-xl:   clamp(1.35rem, 1.1rem + 1.2vw, 1.75rem);   /* subtítulos */
  --texto-2xl:  clamp(1.70rem, 1.3rem + 2.0vw, 2.50rem);   /* títulos de sección */
  --texto-3xl:  clamp(2.10rem, 1.5rem + 3.2vw, 3.50rem);   /* título principal */

  /* --- ESPACIOS ---
     Se usan SOLO estos valores, para que todo quede parejo. */
  --esp-1:  0.25rem;
  --esp-2:  0.5rem;
  --esp-3:  0.75rem;
  --esp-4:  1rem;
  --esp-6:  1.5rem;
  --esp-8:  2rem;
  --esp-12: 3rem;
  --esp-16: 4rem;
  --esp-24: 6rem;

  /* --- ESQUINAS ---
     Rectas, todas: cajas, botones y campos. Las esquinas muy
     redondeadas son una de las señas de un diseño hecho en serie.
     Se dejan los nombres para no tener que tocar cada regla. */
  --radio-sm:   0;
  --radio-md:   0;
  --radio-lg:   0;
  --radio-full: 0;

  /* --- LÍNEAS ---
     La estructura la dan el espacio, la letra y unas pocas líneas
     finas. La línea de la caja de resultado es negra y de 1,5 px. */
  --linea:        1px solid var(--color-cuadricula);
  --linea-fuerte: 1.5px solid var(--color-negro);

  /* --- SOMBRAS ---
     Ninguna: la marca no usa sombras, degradados ni brillos. */
  --sombra-sm: none;
  --sombra-md: none;
  --sombra-lg: none;

  /* --- LAYOUT --- */
  --ancho-max:   1200px;   /* ancho máximo del contenido */
  --alto-nav:    72px;
  --transicion:  180ms ease;
}