/* kroth-tokens.css — los colores, la letra y las medidas de Kroth (2026-10-30).

   Una sola fuente para Kronosys, Enorm y lo que venga. Oscuro por omisión;
   claro con `data-tema="claro"` en <html> (o la clase `.claro`). Todas las
   variables llevan el prefijo `--k-` para no chocar con las de cada app; la
   equivalencia con los nombres de Kronosys y Enorm está en DESIGN.md.

   Contraste medido (WCAG): texto principal ≥ 15:1; secundario ≥ 9:1 en oscuro y
   ≥ 7.4:1 en claro; tenue ≥ 4.6:1 en los dos, sobre todas sus superficies. El oro de acento como TEXTO solo
   en oscuro (8.9:1); en claro el oro de acento es relleno o borde, y el texto
   dorado va en --k-oro-texto (7:1). */

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

:root{
  /* ── La familia del oro: un solo acento, en cinco tonos ── */
  --k-oro-50:#f6efdf;   /* fondo dorado muy suave (claro): grupos, filas abiertas */
  --k-oro-200:#f2cf86;  /* oro claro: texto dorado y estado activo sobre oscuro */
  --k-oro-400:#d6a54a;  /* acento sobre oscuro: bordes activos, iconos, foco */
  --k-oro-600:#b78a2c;  /* acento sobre claro: rellenos y bordes, no texto */
  --k-oro-800:#75520e;  /* texto dorado sobre claro */
  --k-oro-relleno:linear-gradient(150deg,#f6d894 0%,#dcab50 50%,#b9832f 100%); /* el botón principal */
  --k-oro-relieve:inset 0 1px 0 rgba(255,250,230,.7),inset 0 -2px 6px rgba(122,84,24,.3),0 10px 24px -12px rgba(214,165,74,.6);
  --k-sobre-oro:#1b1307; /* texto sobre el relleno dorado: 8:1 */

  /* ── Tema oscuro (por omisión): negro cálido, nunca #000 ── */
  --k-fondo:#0a0908;
  --k-superficie:#141210;
  --k-superficie-2:#1d1a15;
  --k-borde:rgba(244,239,230,.10);
  --k-borde-fuerte:rgba(244,239,230,.18);
  --k-texto:#f4efe6;
  --k-texto-2:#c4bba9;
  --k-tenue:#8a7f6c;
  --k-acento:var(--k-oro-400);
  --k-oro-texto:var(--k-oro-200);
  --k-foco:0 0 0 2px var(--k-fondo),0 0 0 4px var(--k-oro-400);

  /* Estados: son información, no decoración; cada uno con su fondo suave */
  --k-bien:#8fcf9f;   --k-bien-suave:color-mix(in srgb,#8fcf9f 14%,transparent);
  --k-aviso:#e0a13a;  --k-aviso-suave:color-mix(in srgb,#e0a13a 15%,transparent);
  --k-mal:#e47a64;    --k-mal-suave:color-mix(in srgb,#e47a64 14%,transparent);
  --k-arena:#c9b89a;  --k-arena-suave:color-mix(in srgb,#c9b89a 15%,transparent); /* prestado, en tránsito */
  --k-pizarra:#9fb4c6;--k-pizarra-suave:color-mix(in srgb,#9fb4c6 15%,transparent); /* autorizado, en revisión */

  --k-sombra:0 30px 70px -40px #000;
  --k-velo:rgba(0,0,0,.42);

  /* ── Letra ── */
  --k-letra:"Geist","Segoe UI",system-ui,sans-serif;
  --k-mono:"Geist Mono",ui-monospace,Menlo,Consolas,monospace;
  --k-t-etiqueta:500 10.5px/1.2 var(--k-mono);  /* kicker y títulos de columna: MAYÚSCULAS, tracking .12em */
  --k-t-chico:12px;
  --k-t-cuerpo:14px;
  --k-t-subtitulo:600 15px/1.3 var(--k-letra);
  --k-t-titulo:600 clamp(26px,2.4vw,32px)/1.05 var(--k-letra);   /* tracking -.035em */
  --k-t-cifra:600 26px/1 var(--k-letra);                        /* tracking -.03em, tabular */
  --k-t-display:600 clamp(34px,3.6vw,50px)/1.02 var(--k-letra); /* solo Inicio */

  /* ── Medidas: base 4px ── */
  --k-e-1:4px;--k-e-2:8px;--k-e-3:12px;--k-e-4:16px;--k-e-5:20px;--k-e-6:24px;--k-e-8:32px;
  --k-r-control:11px;  /* botones, campos */
  --k-r-mosaico:16px;  /* cifras, mosaicos, renglones de lista */
  --k-r-tarjeta:22px;  /* paneles y tarjetas */
  --k-r-panel:26px;    /* panel lateral */
  --k-r-pastilla:999px;
  --k-control-alto:42px; /* objetivo táctil mínimo 40–44px */

  --k-curva:cubic-bezier(.2,.7,.2,1);
  --k-rapido:.16s;
  --k-normal:.22s;

  color-scheme:dark;
}

/* ── Tema claro: marfil y blanco, el mismo oro ── */
:root[data-tema="claro"],.claro{
  --k-fondo:#f0eee9;
  --k-superficie:#ffffff;
  --k-superficie-2:#f5f3ee;
  --k-borde:#dedad1;
  --k-borde-fuerte:#cfc9bc;
  --k-texto:#191816;
  --k-texto-2:#4f4b44;
  --k-tenue:#6f6a60;
  --k-acento:var(--k-oro-600);
  --k-oro-texto:var(--k-oro-800);
  --k-foco:0 0 0 2px var(--k-superficie),0 0 0 4px var(--k-oro-600);

  --k-bien:#256a42;   --k-bien-suave:#e3f1e8;
  --k-aviso:#875008;  --k-aviso-suave:#fbecd5;
  --k-mal:#a1372a;    --k-mal-suave:#f8e1dc;
  --k-arena:#6e5f45;  --k-arena-suave:#efe8da;
  --k-pizarra:#3d5a73;--k-pizarra-suave:#e2e9ef;

  --k-sombra:0 16px 38px rgba(22,18,10,.09);
  --k-velo:rgba(17,17,16,.32);
  color-scheme:light;
}

@media (prefers-reduced-motion:reduce){
  :root{--k-rapido:0s;--k-normal:0s}
}