/* GENERADO por scripts/paleta.mjs desde datos/paleta.json. No editar a mano. */

:root {
  /* base */
  --c-pared: oklch(96.2% 0.011 84.6); /* Crema. El muro de Paint y el fondo de Entertainment. */
  --c-hueso: oklch(91.4% 0.017 84.6); /* Texto sobre la noche. Mismo tono que la pared, mas oscuro. Nunca blanco puro: sobre negro vibra. */
  --c-tinta: oklch(21.4% 0.058 298.3); /* Negro violaceo. Texto principal sobre la pared. */
  --c-tinta-suave: oklch(39.2% 0.053 300.3); /* Texto secundario. Tenido del mismo tono que la tinta, no gris. */
  --c-noche: oklch(14.9% 0.017 284.1); /* El fondo de Mind y el cierre oscuro de Paint. */

  /* pintura */
  --c-f-magenta: oklch(69.1% 0.282 338.1);
  --c-f-naranja: oklch(68.2% 0.211 37.7);
  --c-f-violeta: oklch(54.2% 0.277 290.6); /* El unico fluor que aguanta texto sobre la pared (5.2:1). */
  --c-f-cian: oklch(80.7% 0.146 218.9);
  --c-f-lima: oklch(91.7% 0.239 127.7); /* 91.7% de luminosidad contra 96.2% de la pared: 1.1:1. Jamas texto sobre claro. */
  --c-f-amarillo: oklch(91.7% 0.192 101.4); /* Igual que el lima: 1.1:1 sobre la pared. */

  /* mind */
  --c-brasa: oklch(72.4% 0.187 48.9); /* El acento unico de Mind. La brasa del copal. */
  --c-brasa-baja: oklch(58.1% 0.157 46.8); /* La misma brasa apagandose. Bordes y reposo. */
  --c-oro: oklch(72.8% 0.138 89.7); /* Oro viejo. Numeros, reglas, detalle ceremonial. */
  --c-jade: oklch(54.7% 0.058 175.6); /* El unico frio. Poco, y nunca al lado de la brasa. */

  /* logo */
  --c-logo-tinta: oklch(17.1% 0.049 279.9);
  --c-logo-violeta: oklch(43.4% 0.244 286.6);
  --c-logo-azul: oklch(57.3% 0.229 260.2);
  --c-logo-naranja: oklch(77.4% 0.17 66.6);
  --c-logo-coral: oklch(65.4% 0.225 19.8);

  /* la pintura, en el orden que la usa el efecto */
  --pintura: var(--c-f-magenta), var(--c-f-naranja), var(--c-f-violeta), var(--c-f-cian), var(--c-f-amarillo), var(--c-f-lima);
}

[data-marca="paint"] {
  --fondo: var(--c-pared);
  --texto: var(--c-tinta);
  --texto-secundario: var(--c-tinta-suave);
  --acento: var(--c-f-violeta);
  --foco: var(--c-f-violeta);
  --seleccion: var(--c-f-violeta);
  --seleccion-texto: var(--c-tinta);
  --caret: var(--c-tinta);
  --borde: var(--c-tinta-suave);

  color: var(--texto);
  background: var(--fondo);
  caret-color: var(--caret);
  accent-color: var(--acento);
  scrollbar-color: var(--borde) var(--fondo);
}

[data-marca="paint"] ::selection {
  background: color-mix(in oklch, var(--seleccion) 22%, transparent);
  color: var(--seleccion-texto);
}

[data-marca="paint"] :focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
}

[data-marca="paint"] a {
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

[data-marca="mind"] {
  --fondo: var(--c-noche);
  --texto: var(--c-hueso);
  --texto-secundario: var(--c-oro);
  --acento: var(--c-brasa);
  --foco: var(--c-brasa);
  --seleccion: var(--c-brasa);
  --seleccion-texto: var(--c-hueso);
  --caret: var(--c-brasa);
  --borde: var(--c-brasa-baja);

  color: var(--texto);
  background: var(--fondo);
  caret-color: var(--caret);
  accent-color: var(--acento);
  scrollbar-color: var(--borde) var(--fondo);
}

[data-marca="mind"] ::selection {
  background: color-mix(in oklch, var(--seleccion) 30%, transparent);
  color: var(--seleccion-texto);
}

[data-marca="mind"] :focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
}

[data-marca="mind"] a {
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

/* duraciones y capacidades alinean en columna */
[data-dato], .dato { font-variant-numeric: tabular-nums; }