/* ============================================================
   assets/css/ia/ia-tokens.css
   Tokens del sistema visual de las herramientas con IA.

   SOLO variables en :root, sin selectores: es portable. Lo usan
   hoy las herramientas DocencIA (xp-base.css define sus --xp-*
   como alias de estos) y después TutorIA, sin acoplarse a
   ninguna herramienta.

   Los valores salen del rediseño del home de pruebat.org; cada
   uno con su origen en docs/sistema_visual_ia.md §2 (raíz del
   proyecto). Fuentes: layout/templates/source/feed/
   home-secciones.css, home-hero.css, home-ui-v2.css, home-riel.css
   y MFE/docs/DISENO-HANDOFF.md. No hay colores inventados: lo
   que no existe en el home (error, aviso) viene del sistema .xp-.

   Contraste (AA, texto normal):
     tinta sobre blanco 15.9:1 · tinta suave sobre blanco 5.1:1
     blanco sobre coral hondo 4.9:1 (botón primario)
     coral hondo hover sobre tinte coral 5.5:1 (estados activos)
     aqua hondo sobre tinte aqua 4.7:1
   NO usar como texto: coral #ED6A46 (3.1:1 con blanco) ni aqua
   #29C99B sobre blanco.
   ============================================================ */

:root {
  /* ---- Color (home: home-secciones.css .pths) ---- */
  --ia-coral: #ED6A46;              /* acento, íconos, foco sobre claro */
  --ia-coral-hondo: #C24A2A;        /* botón primario y enlaces */
  --ia-coral-hondo-hover: #A93F23;  /* hover; texto sobre tinte coral */
  --ia-coral-tinte: rgba(237, 106, 70, .1);
  --ia-aqua: #29C99B;               /* acento IA, progreso (decorativo) */
  --ia-aqua-hondo: #0E7A5C;         /* texto de éxito / etiqueta IA */
  --ia-aqua-tinte: rgba(41, 201, 155, .14);
  --ia-ambar: #F2C12E;              /* foco sobre fondos oscuros */
  --ia-abismo: #06222F;
  --ia-marine: #0C4465;
  --ia-tinta: #0C2230;              /* texto sobre claro */
  --ia-tinta-suave: #5A7280;        /* texto secundario */
  --ia-niebla: #F3F6F7;             /* fondo de página */
  --ia-superficie: #FFFFFF;
  --ia-borde: rgba(12, 34, 48, .1);
  --ia-borde-fuerte: rgba(12, 34, 48, .22);
  --ia-grafito: #434343;            /* header/footer institucionales (referencia) */

  /* Estados que el home no define: del sistema .xp- */
  --ia-error: #C2413B;              /* borde e ícono; el texto va en tinta */
  --ia-error-tinte: #FBEAE9;
  --ia-aviso: #B7791F;
  --ia-aviso-tinte: #FCF3E3;

  /* ---- Degradados ---- */
  /* Banda de herramienta: el mismo del hero y las secciones oscuras del home */
  --ia-banda: radial-gradient(circle at 88% 8%, rgba(237, 106, 70, .16), transparent 45%),
              radial-gradient(circle at 6% 96%, rgba(41, 201, 155, .13), transparent 45%),
              linear-gradient(135deg, #06222F, #0C4465);
  /* Firma IA (composición nueva con aqua y coral) */
  --ia-hilo: linear-gradient(90deg, #29C99B, #ED6A46);
  /* Halo del input principal (aqua con alfa + sombra de tarjeta del home) */
  --ia-halo: 0 0 0 4px rgba(41, 201, 155, .18), 0 18px 40px -24px rgba(12, 34, 48, .45);

  /* ---- Tipografía (la carga header.php con ui-v2) ---- */
  --ia-fuente: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ia-t-titulo: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);     /* 800, -.02em, 1.15 */
  --ia-t-subtitulo: clamp(1.1rem, 1rem + .4vw, 1.3rem);     /* 700, 1.25 */
  --ia-t-cuerpo: clamp(.95rem, .92rem + .2vw, 1.05rem);     /* 1.6 */

  /* ---- Radios ---- */
  --ia-radio-pastilla: 999px;
  --ia-radio-tarjeta: 16px;
  --ia-radio-control: 12px;
  --ia-radio-chico: 8px;

  /* ---- Sombras (tinta, con spread negativo, como el home) ---- */
  --ia-sombra-tarjeta: 0 18px 40px -24px rgba(12, 34, 48, .45);
  --ia-sombra-elevada: 0 16px 34px -14px rgba(12, 34, 48, .55);
  --ia-sombra-primario: 0 12px 28px -12px rgba(194, 74, 42, .65);

  /* ---- Espacio y medidas ---- */
  --ia-respiro: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);
  --ia-ancho: min(1200px, 100% - 2 * clamp(1rem, 4vw, 2rem));
  --ia-tactil: 44px;

  /* ---- Movimiento (respetar prefers-reduced-motion en cada capa) ---- */
  --ia-dur: .18s;
  --ia-dur-lenta: .25s;
  --ia-curva: ease;
}