/* TREXIA Design System — capa canónica de tokens.
 *
 * FUENTE DE VERDAD: proyecto "TREXIA Design System" en claude.ai/design
 * (79da8b96-8756-432c-91eb-79151c7eb0f6), archivos tokens/fonts.css,
 * tokens/colors.css, tokens/typography.css y tokens/spacing.css.
 *
 * No editar valores a mano: si el diseño cambia, se regenera desde el DS.
 * Consumido por dos vías —
 *   1. las plantillas base de la app (<link> antes del bundle de webpack)
 *   2. landing/css/trexia-landing.css (@import)
 * — para que app y landing compartan una única paleta.
 *
 * Las fuentes se auto-hospedan desde ../fonts/ en vez del CDN jsDelivr que usa
 * el DS: evita una dependencia externa en runtime y deja que el manifest de
 * WhiteNoise las versione junto al resto de los estáticos.
 */

/* ===== Webfonts ===== */

@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-latin-wght-normal.ba4038fc5cb5.woff2")
    format('woff2-variations');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-400-normal.77bc02670657.woff2") format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-400-italic.ac3e6cdbce96.woff2") format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-500-normal.f7016cd446d2.woff2") format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-600-normal.196e3cbc5fee.woff2") format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-700-normal.c277d7b83f8a.woff2") format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-400-normal.79936b18df9f.woff2") format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-500-normal.b1c8a895f5fd.woff2") format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-600-normal.5a2ce7798732.woff2") format('woff2');
}

:root {
  color-scheme: light;

  /* ===== Color — "sobriedad nórdica" ===== */

  /* Acento: azul nórdico apagado. Único color de acción de la marca. */
  --blue-50: #eef3f5;
  --blue-100: #dce6ea;
  --blue-200: #b9cdd5;
  --blue-300: #86a0b0;
  --blue-400: #5c7a90;
  --blue-500: #3e5a72;
  --blue-600: #345066;
  --blue-700: #2a4055;
  --blue-800: #203241;
  --blue-900: #182530;

  /* Ceniza / papel — escala neutra cálida (carbón a papel) */
  --ink-950: #1c1e1f;
  --ink-900: #26282b;
  --ink-800: #34373a;
  --ink-700: #494c4f;
  --ink-600: #5b5f63;
  --ink-500: #6e7175;
  --ink-400: #8c8a82;
  --ink-300: #a9a79e;
  --ink-200: #c7c4b8;
  --ink-100: #e2dfd5;
  --ink-50: #f2f1ec;
  --ink-25: #f8f7f3;
  --white: #ffffff;

  /* Semántico — veredictos de informes de IA. Misma temperatura y peso visual
     que el resto de la paleta: se leen por posición y texto, nunca compiten en
     brillo con el acento principal. */
  --green-600: #5c7a63;
  --green-100: #e6eae2;
  --amber-600: #c2872a;
  --amber-100: #f5e6ce;
  --red-600: #c1503c;
  --red-100: #f7dad1;
  /* Escalón 700: el 600 no alcanza 4.5:1 para texto sobre su propio tinte
     —2.52:1 el ámbar y 3.55:1 el rojo— así que un badge de plazo tenía que
     renderizar el texto en tinta neutra y perdía el tono. Estos dos conservan
     el tono exacto del 600 (37° y 9°) bajando sólo el valor, y despejan
     4.82:1 sobre el soft y 5.92:1 / 6.36:1 sobre blanco. */
  --amber-700: #855c1d;
  --red-700: #9f4232;

  /* Alias semánticos */
  --brand: var(--blue-500);
  --brand-strong: var(--blue-600);
  --brand-soft: var(--blue-50);

  --text-strong: var(--ink-950);
  --text-body: var(--ink-800);
  --text-muted: var(--ink-600);
  /* ink-400 no cumple 4.5:1 en texto normal — ver auditoría de accesibilidad */
  --text-faint: var(--ink-500);
  --text-inverse: #ffffff;
  --text-link: var(--blue-600);

  --surface-page: var(--ink-25);
  --surface-card: #ffffff;
  --surface-sunken: var(--ink-50);
  --surface-ink: var(--ink-950);
  --surface-ink-2: var(--ink-900);

  --border-subtle: var(--ink-100);
  --border-default: var(--ink-200);
  --border-strong: var(--ink-300);
  --focus-ring: var(--blue-400);

  --ok: var(--green-600);
  --ok-soft: var(--green-100);
  --warn: var(--amber-600);
  --warn-soft: var(--amber-100);
  --bad: var(--red-600);
  --bad-soft: var(--red-100);
  /* Para texto sobre el fondo soft correspondiente. --warn y --bad siguen
     siendo los del relleno y el punto, que no llevan piso de contraste. */
  --warn-strong: var(--amber-700);
  --bad-strong: var(--red-700);

  /* ===== Tipografía ===== */
  --font-display: 'Schibsted Grotesk', 'IBM Plex Sans', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --font-size-xs: 12px;
  /* 14px, no 13: la rampa saltaba de 12 a 13 a 15 y todo el texto secundario
     —organismo, fechas, subtítulos, la lista de features de la landing— caía en
     13, por debajo del piso de body de Material (14sp). El paso de 13 no
     describía nada que el sistema necesitara: quedaba a 1px del xs. */
  --font-size-sm: 14px;
  --font-size-base: 15px;
  --font-size-md: 17px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 30px;
  --font-size-3xl: 38px;
  --font-size-4xl: 48px;
  --font-size-5xl: 64px;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.55;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-tight: -0.015em;
  --tracking-caps: 0.08em;
  --tracking-wordmark: 0.01em;

  /* ===== Espaciado, radios, sombras, movimiento ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Área táctil mínima. 44px sale de Material (48dp con densidad -1) y de las
     HIG de Apple; por debajo el error de toque crece rápido en la mano no
     dominante. Vivía hardcodeado en varios lugares, cada uno con su comentario
     explicando el número — o sea que el siguiente componente lo iba a volver a
     fallar. Hoy lo consumen saas-datatable.css y trexia.css. */
  --tap-target: 44px;

  /* Alto de la app bar. Estaba en trexia.css, fuera del DS. */
  --topbar-height: 58px;

  /* Radios crisp y casi rectos. Pill se reserva a tags/badges/estados. */
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 2px;
  --radius-xl: 4px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(10, 14, 26, 0.06);
  --shadow-md: 0 2px 8px rgba(10, 14, 26, 0.08);
  --shadow-lg: 0 8px 24px rgba(10, 14, 26, 0.12);
  --shadow-pop: 0 12px 40px rgba(10, 14, 26, 0.18);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;

  /* Altura de la barra de navegación de la landing (no proviene del DS). */
  --nav-height: 80px;
}

/* Foco de teclado — visible en cualquier control interactivo. Sin esto, la
   navegación con Tab pierde referencia visual en toda la interfaz. */
button:focus-visible,
a:focus-visible,
[role='button']:focus-visible,
[role='menuitem']:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}