/* ============================================================
   Kontu — tokens de diseño v2
   Fuente única de verdad. Todo color, radio, sombra y tiempo
   de la app sale de aquí. Nunca escribir un hex suelto en un
   componente.
   ============================================================ */

@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* ---------- Paleta de marca (definida por Kontu) ----------
     Azul profundo #12326B  barra lateral, encabezados, marca
     Azul vivo     #2F6FED  enlaces, pestaña activa, acentos de texto
     Amarillo      #FFD100  botón principal, el punto del logo
     Tinta         #14213D  texto
     El resto de la escala se deriva de estos cuatro. */
  --brand: #12326B;
  --brand-vivid: #2F6FED;
  --brand-yellow: #FFD100;
  --brand-ink: #14213D;

  /* escala del azul profundo */
  --ink-950: #0B2250;   /* fondo del login (azul profundo oscurecido) */
  --ink-900: #12326B;   /* = Azul profundo: sidebar, encabezados, nivel A */
  --ink-800: #1B3F80;   /* hover y activo en sidebar */
  --ink-700: #2A4C8C;   /* bordes sobre azul, barras de impuestos */
  --ink-500: #5E7BB3;   /* nivel B, remuneraciones, texto secundario sobre azul */
  --ink-300: #AFC1E3;   /* texto terciario sobre azul */

  /* amarillo */
  --saffron: #FFD100;        /* = Amarillo: botón principal, punto del logo */
  --saffron-hover: #F2C500;
  --saffron-press: #E0B600;
  --saffron-soft: #FFF6CC;

  /* ---------- Superficies ---------- */
  --bg: #F4F5F7;        /* fondo de la app: gris frío, no crema */
  --surface: #FFFFFF;
  --surface-2: #F9FAFB; /* cabeceras de tabla, zonas hundidas */
  --line: #E3E6EB;
  --line-strong: #CDD3DC;

  /* ---------- Texto ---------- */
  --text: #14213D;       /* = Tinta */
  --heading: #12326B;    /* = Azul profundo en títulos */
  --text-2: #475471;
  --text-3: #76819A;
  --text-on-ink: #EEF3FC;
  --text-on-yellow: #14213D;

  /* ---------- Interacción ---------- */
  --accent: #2F6FED;        /* = Azul vivo: links, pestaña activa, selección */
  --accent-soft: #EAF1FE;
  --focus: 0 0 0 3px rgba(47, 111, 237, .35);  /* anillo de foco azul vivo */

  /* ---------- Semáforo (siempre con texto, nunca solo color) ---------- */
  --risk: #C0392B;   --risk-bg: #FCEBE9;   --risk-line: #F3C4BE;
  --warn: #B26B00;   --warn-bg: #FDF2DF;   --warn-line: #F1D6A6;
  --ok:   #2B7A55;   --ok-bg:   #E5F3EC;   --ok-line:   #B9DEC9;
  --idle: #8A94A6;   --idle-bg: #EEF0F3;

  /* ---------- Niveles A–D: intensidad = prioridad ---------- */
  --lvl-a-bg: #12326B; --lvl-a-fg: #FFFFFF;
  --lvl-b-bg: #5E7BB3; --lvl-b-fg: #FFFFFF;
  --lvl-c-bg: #DCE5F5; --lvl-c-fg: #12326B;
  --lvl-d-bg: transparent; --lvl-d-fg: #76819A; --lvl-d-line: #CDD3DC;

  /* ---------- Tipografía ---------- */
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px;
  --fs-16: 16px; --fs-20: 20px; --fs-24: 24px; --fs-32: 32px; --fs-44: 44px;

  /* ---------- Espaciado (base 4) ---------- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;

  /* ---------- Radios: jerarquía, no uno solo ---------- */
  --r-xs: 4px;   /* chips, nivel, checkbox */
  --r-sm: 6px;   /* inputs, botones */
  --r-md: 10px;  /* paneles */
  --r-lg: 14px;  /* drawer, modal, paleta */

  /* ---------- Elevación: solo lo que flota tiene sombra ---------- */
  --shadow-pop: 0 1px 2px rgba(20,33,61,.06), 0 8px 24px -6px rgba(20,33,61,.18);
  --shadow-overlay: 0 2px 6px rgba(20,33,61,.08), 0 24px 64px -12px rgba(20,33,61,.35);
  --scrim: rgba(11,34,80,.22);

  /* ---------- Movimiento ---------- */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 120ms;   /* hover */
  --t-base: 200ms;   /* cambio de estado */
  --t-slow: 320ms;   /* drawer, modal */
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; }
}