/*
 * Marca InfoHub (by KnowHub): tokens de UI.
 * Fuente: «KnowHub · Manual de Marca» v1.0, octubre 2026.
 *   03  Paleta: índigo #4B4FC4, tinta #14152E, crema #FBF6E3, violeta InfoHub #7B61FF.
 *   03B Interfaces de producto: blanco/crema 62 %, tinta 24 %, acento 11 %, índigo 3 %
 *       (el índigo queda solo para la firma «by KnowHub»).
 *   04  Space Grotesk (títulos), IBM Plex Sans (lectura), IBM Plex Mono (etiquetas).
 *   05  Contraste WCAG AA. Blanco sobre violeta puro da 4,2:1 (solo texto grande),
 *       por eso botones y enlaces usan el violeta oscuro de la escala (#5A42D6, 6,6:1).
 *
 * Copiar este archivo y la carpeta fuentes/ a cada app; las rutas de url() son relativas.
 */

@font-face { font-family: "Space Grotesk"; font-weight: 400; font-style: normal; font-display: swap; src: url("fuentes/space-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-style: normal; font-display: swap; src: url("fuentes/space-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 600; font-style: normal; font-display: swap; src: url("fuentes/space-grotesk-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("fuentes/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url("fuentes/ibm-plex-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("fuentes/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("fuentes/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("fuentes/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("fuentes/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  /* Paleta de referencia (no usar directo en componentes) */
  --kh-indigo: #4b4fc4;
  --kh-tinta: #14152e;
  --kh-tinta-80: #2c2e47;
  --kh-tinta-60: #5a5b70;
  --kh-tinta-30: #c9c7bb;
  --kh-crema: #fbf6e3;
  --kh-crema-osc: #f2ebd1;
  --kh-crema-borde: #e3dcc0;
  --ih-violeta: #7b61ff;
  --ih-violeta-osc: #5a42d6;
  --ih-violeta-med: #a695ff;
  --ih-violeta-claro: #d9d1ff;
  --ih-violeta-velo: #efebff;

  /* Tipografía */
  --font-titulo: "Space Grotesk", Arial, sans-serif;
  --font-sans: "IBM Plex Sans", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Tokens semánticos · tema claro (predeterminado) */
  --ui-fondo: var(--kh-crema);
  --ui-superficie: #ffffff;
  --ui-superficie-2: var(--kh-crema-osc);
  --ui-texto: var(--kh-tinta);
  --ui-texto-2: var(--kh-tinta-60);
  --ui-borde: var(--kh-crema-borde);
  --ui-borde-fuerte: var(--kh-tinta-30);
  --ui-acento: var(--ih-violeta);          /* símbolo, foco, indicadores */
  --ui-accion: var(--ih-violeta-osc);      /* botones con texto blanco, enlaces */
  --ui-accion-hover: #4a33bd;
  --ui-sobre-accion: #ffffff;
  --ui-seleccion: var(--ih-violeta-velo);
  --ui-firma: var(--kh-indigo);            /* «by KnowHub» */
  --ui-peligro: #b42318;
  --ui-peligro-fondo: #fef3f2;
  --ui-exito: #127a4a;
  --ui-exito-fondo: #ecfdf3;
  --ui-aviso: #9a4a06;
  --ui-aviso-fondo: #fffaeb;
  --ui-radio: 8px;
  color-scheme: light;
}

/* Tema oscuro: tinta de fondo, texto crema (manual 08 «Sobre tinta») */
:root[data-theme="dark"] {
  --ui-fondo: var(--kh-tinta);
  --ui-superficie: #1e2040;
  --ui-superficie-2: var(--kh-tinta-80);
  --ui-texto: var(--kh-crema);
  --ui-texto-2: var(--kh-tinta-30);
  --ui-borde: #34365a;
  --ui-borde-fuerte: #4a4c70;
  --ui-acento: var(--ih-violeta);
  --ui-accion: var(--ih-violeta-osc);
  --ui-accion-hover: #6b54e6;
  --ui-sobre-accion: #ffffff;
  --ui-seleccion: #2a2752;
  --ui-firma: #8183d6;                    /* índigo claro sobre tinta, 6,2:1 */
  --ui-peligro: #f97066;
  --ui-peligro-fondo: #3b1a22;
  --ui-exito: #6ce9a6;
  --ui-exito-fondo: #10291f;
  --ui-aviso: #fdb022;
  --ui-aviso-fondo: #33240a;
  color-scheme: dark;
}