/* paleta.css — color de marca AXIOM AI. Única fuente de verdad.
   Documentado en marca/README.md. La escala azul va de acento (1) a
   principal (4): azul-1 se usa poco, azul-4 se usa mucho. */
:root {
  --azul-1: #0DA9F3;   /* acento, el que menos se usa */
  --azul-2: #067AB0;   /* apoyo claro */
  --azul-3: #07588A;   /* apoyo oscuro */
  --azul-4: #071B30;   /* PRINCIPAL: fondos y superficies de marca */
  --negro:  #000000;   /* texto */
  --gris:   #ECECEC;   /* fondos claros, el contrapeso del azul */

  /* El lienzo del diagrama: más oscuro que azul-4 a propósito. azul-4 es la
     superficie de marca (barras, botones); el lienzo es el espacio donde las
     cajas FLOTAN, y para que un resplandor se lea como resplandor necesita
     fondo casi negro. Sigue siendo el mismo azul, solo con menos luz. */
  --lienzo:      #050e1a;
  --lienzo-alto: #0a1728;   /* superficies que se levantan del lienzo */

  /* señales sobre oscuro: el rojo, ámbar y verde de marca son para papel
     blanco; sobre negro se hunden. Estos son los mismos tonos con la luz que
     necesitan. --ambar-luz es la señal de «te toca a ti»: no es una alarma,
     es lo que de verdad le pedimos a la persona. El rojo se guarda para
     hallazgos del propio proceso (una entrega informal, una excepción). */
  --rojo-luz:  #ff5a5a;
  --ambar-luz: #ffa63d;
  --verde-luz: #3ddc84;

  /* derivados sobre fondo oscuro */
  --azul-4-90: rgba(255,255,255,.90);
  --azul-4-70: rgba(255,255,255,.70);
  --azul-4-45: rgba(255,255,255,.45);
  --azul-4-18: rgba(255,255,255,.18);

  /* EL DEGRADADO DE MARCA: el mismo viaje que hace el «ai» del logo, de azul
     claro a azul profundo. Vive aquí y no en cada botón por la misma razón que
     el resto de la paleta: si mañana cambia, cambia en un solo lugar. */
  --degradado: linear-gradient(135deg, var(--azul-2) 0%, var(--azul-3) 52%, var(--azul-4) 100%);
  /* el hover LEVANTA el extremo oscuro, no aclara el claro. Metiendo azul-1
     el texto blanco caía a 2.63:1 sobre el tercio izquierdo del botón —muy
     por debajo de AA— justo cuando el cursor está encima. Así el tono más
     claro sigue siendo azul-2 (4.75:1) y el botón igual se siente vivo. */
  --degradado-vivo: linear-gradient(135deg, var(--azul-2) 0%, var(--azul-3) 65%, #0a3f68 100%);

  /* TINTES DEL AZUL, DERIVADOS — no inventados a ojo. Los botones secundarios,
     los chips y los avisos vivían sobre #e1eff8, un celeste escrito a mano y
     copiado en cuatro archivos: no salía de esta paleta, así que la marca se
     iba diluyendo tinte a tinte. Ahora se calculan desde azul-1 y por
     definición son del mismo tono. El hex de arriba es el respaldo para
     navegadores sin color-mix; el de abajo manda donde existe. */
  --azul-tinte:      #ddf3fd;
  --azul-tinte:      color-mix(in srgb, var(--azul-1) 14%, #fff);
  --azul-tinte-alto: #caecfc;
  --azul-tinte-alto: color-mix(in srgb, var(--azul-1) 22%, #fff);
  --azul-tinte-leve: #f0fafe;
  --azul-tinte-leve: color-mix(in srgb, var(--azul-1) 6%, #fff);

  /* tintes del gris para separar superficies claras */
  --gris-borde: #d8d8d8;
  --gris-suave: #f5f5f5;

  /* semánticos: se mantienen fuera de la paleta a propósito (error/éxito no
     son colores de marca, son señales) */
  --rojo: #b91c1c;  --rojo-bg: #fdeaea;
  --verde: #15803d; --verde-bg: #e8f5ec;
  --ambar: #b45309; --ambar-bg: #fdf3e2;
}