/* tokens.css — la fuente de verdad visual del sistema.
   Origen: la lámina de marca (mediakit/ef2027/origen/propuestas-de-logo.png).
   Los cambios de identidad se hacen acá, nunca en una vista.

   Los valores son los ROTULADOS en la lámina, no los píxeles: la imagen está
   exportada con desvío de color y sus muestras se ven más oscuras de lo que
   dicen (#0E4B66 se lee #0E364C en el archivo). Los colores se copian del
   valor escrito, nunca con cuentagotas sobre una imagen.

   El rol de cada color no es decorativo, sale del contraste medido:
   el azul petróleo sobre el fondo oscuro da 1.68 —invisible—, así que NO es
   un acento: es superficie, la banda plena. Sobre el fondo oscuro el que
   destaca es el cobre. En modo claro se invierte: ahí el azul da 8.92 y
   vuelve a ser protagonista. */
:root{
  /* ---- Identidad ---- */
  --negro:#222222;       /* el fondo dominante */
  --azul:#0E4B66;        /* superficie: bandas y bloques plenos. Nunca texto sobre oscuro */
  --gris:#70757C;        /* neutro: bordes y separadores */
  --cobre:#B87333;       /* el acento. El único color vivo sobre el fondo */
  --blanco:#F8F8F8;      /* la tinta */

  /* ---- Variantes de texto ----
     El cobre de marca da 4.20 sobre el fondo y el gris 3.43: no alcanzan para
     texto chico. Estas sí.

     OJO CON COMO SE ACLARA UN COLOR. Mezclar el cobre con blanco le baja la
     saturación del 72% al 50% y lo deja beige: es lo que pasó en la primera
     versión. Estos valores suben el BRILLO manteniendo la saturación, así el
     naranja sigue siendo naranja. Mismo contraste, color vivo. */
  --cobre-texto:#E68F40;     /* 6.34 */
  --cobre-vivo:var(--cobre-texto);  /* el mismo, para botones y acentos que
                                       tienen que estar presentes */
  --gris-texto:#9B9EA3;      /* 5.92 */
  --azul-claro:#87A5B3;      /* 6.11 — el azul cuando no queda otra que ponerlo sobre oscuro */

  /* ---- Estados ----
     Salen de la paleta: la advertencia es el cobre, y el éxito un verde
     apagado que convive con el azul sin pelearle. */
  --exito:#4F7A52;
  --advertencia:var(--cobre);
  --error:#A34A42;
  --exito-texto:#8FB392;
  --advertencia-texto:var(--cobre-texto);
  --error-texto:#D99C95;

  /* ---- Superficies (oscuro por defecto) ---- */
  --fondo:var(--negro);
  --fondo-alt:#1C1C1C;
  --superficie:#2A2A2A;
  --tinta:var(--blanco);
  --tinta-suave:var(--gris-texto);
  --borde:rgba(248,248,248,.13);

  /* La tinta de los botones y sellos sobre cobre. Da 4.89: el blanco sobre
     cobre daría 3.79 y no alcanza para el cuerpo de un botón. */
  --tinta-boton:#1A1206;

  /* ---- Tipografia y medidas ---- */
  --dz:'Manrope',system-ui,sans-serif;
  --medida:min(1200px,92vw);
  --diag:45deg;
}

@media (prefers-color-scheme:light){
  :root{
    --fondo:var(--blanco);
    --fondo-alt:#ECEDED;
    --superficie:#FFFFFF;
    --tinta:var(--negro);
    --tinta-suave:#5A5E63;
    --borde:rgba(34,34,34,.15);
    /* Sobre claro el azul llega a 8.92: acá sí puede ser texto y acento. */
    --azul-claro:#0E4B66;
    --cobre-texto:#8A4A12;     /* 6.44, saturado */
    --gris-texto:#5A5E63;      /* 6.15 */
    --exito-texto:#2F5A33;
    --error-texto:#8C2F28;
  }
}
/* El data-theme del boton de tema le gana a la preferencia del sistema. */
:root[data-theme="dark"]{
  --fondo:#222222; --fondo-alt:#1C1C1C; --superficie:#2A2A2A;
  --tinta:#F8F8F8; --tinta-suave:#9B9EA3; --borde:rgba(248,248,248,.13);
  --azul-claro:#87A5B3; --cobre-texto:#E68F40; --gris-texto:#9B9EA3;
  --exito-texto:#8FB392; --error-texto:#D99C95;
}
:root[data-theme="light"]{
  --fondo:#F8F8F8; --fondo-alt:#ECEDED; --superficie:#FFFFFF;
  --tinta:#222222; --tinta-suave:#5A5E63; --borde:rgba(34,34,34,.15);
  --azul-claro:#0E4B66; --cobre-texto:#8A4A12; --gris-texto:#5A5E63;
  --exito-texto:#2F5A33; --error-texto:#8C2F28;
}