/* Trama sobre el sistema de diseño compartido de los portales (variables --mc-*
   de Certo, la consola, la cartera y el tema de Keycloak). Redefine esas
   variables con la marca de Trama (decisiones 0008 y 0010). Se carga después
   de los tokens de cada portal; :root sube la especificidad para ganarles. */
@import url("trama.css");

html[data-branded]:root {
  --mc-navy: #2b3a73;
  --mc-azul: #3a4a86;
  --mc-oceano: #2b3a73;
  --mc-claro: #d9a23a;
  --mc-rojo: #9e2f35;
  --mc-olivo: #4e6b3a;
  --mc-oro: #d9a23a;
  --mc-gris: #3a3f4d;
  --mc-grad: linear-gradient(135deg, #1f2a57 0%, #2b3a73 55%, #9e2f35 130%);

  --mc-fondo: #f5efe3;
  --mc-superficie: #fffdf8;
  --mc-hielo: #efe6d3;
  --mc-linea: #d9cfbc;
  --mc-texto: #1e2433;
  --mc-suave: #545a6b;
  --mc-enlace: #2b3a73;
  --mc-foco: #9e2f35;

  --mc-primario: #2b3a73;
  --mc-primario-texto: #fffdf8;
  --mc-primario-hover: #1f2a57;

  --mc-ok: #3f5a2e;
  --mc-ok-fondo: #e3ead9;
  --mc-esp: #7c5000;
  --mc-esp-fondo: #f6ead0;
  --mc-no: #9e2f35;
  --mc-no-fondo: #f6dfe0;

  --mc-fuente-titulos: "Fraunces", Georgia, serif;
  --mc-fuente-texto: "Atkinson Hyperlegible", system-ui, sans-serif;

  --mc-r-s: 4px;
  --mc-r: 6px;
  --mc-r-l: 10px;
  --mc-r-xl: 14px;
  --mc-sombra: 0 1px 2px rgba(30, 36, 51, .06), 0 8px 24px -12px rgba(30, 36, 51, .18);
  --mc-sombra-alta: 0 18px 40px -16px rgba(31, 42, 87, .55);
}

html[data-branded]:root :is(h1, h2, h3) {
  font-variation-settings: "SOFT" 100, "opsz" 96;
}

@media (prefers-color-scheme: dark) {
  html[data-branded][data-tema='b']:root {
    --mc-fondo: #14182a;
    --mc-superficie: #1e2338;
    --mc-hielo: #262c46;
    --mc-linea: #343a55;
    --mc-texto: #eee8da;
    --mc-suave: #b9b4a8;
    --mc-enlace: #a9b7f2;
    --mc-foco: #ec8f88;
    --mc-primario: #a9b7f2;
    --mc-primario-texto: #14182a;
    --mc-primario-hover: #c6d0f7;
    --mc-ok: #a9cf96;
    --mc-ok-fondo: #22301c;
    --mc-esp: #f2bb63;
    --mc-esp-fondo: #3b2b0e;
    --mc-no: #ec8f88;
    --mc-no-fondo: #3f1d20;
    --mc-rojo: #ec8f88;
    --mc-olivo: #a9cf96;
    --mc-gris: #b9b4a8;
    --mc-sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -14px rgba(0, 0, 0, .6);
  }
}