/* ============================================================
   tokens.css — Sistema de diseño "cinematográfico" del
   Ecosistema Digital FES Iztacala. Construido sobre la
   identidad Navy + Oro existente, con nuevas variables de
   movimiento, profundidad y luz. (Capa aditiva, no rompe nada)
   ============================================================ */
:root{
  /* Paleta base (consistente con el sitio) */
  --cx-navy:#0C2340; --cx-navy-700:#102B4F; --cx-navy-500:#163A64; --cx-navy-400:#1a4a7a;
  --cx-gold:#C4A24E; --cx-gold-300:#D4B86A; --cx-gold-100:#EBD9A8;
  --cx-cream:#FAF8F4; --cx-ink:#0A1A30;

  /* Acentos tecnológicos para realces/IA */
  --cx-cyan:#38BDF8; --cx-violet:#7C5CFF; --cx-emerald:#34D399;

  /* Superficies "glass" */
  --cx-glass:rgba(255,255,255,.06);
  --cx-glass-strong:rgba(255,255,255,.10);
  --cx-glass-border:rgba(255,255,255,.14);
  --cx-glass-dark:rgba(12,35,64,.55);

  /* Luces y sombras */
  --cx-glow-gold:0 0 0 1px rgba(196,162,78,.25), 0 8px 40px rgba(196,162,78,.18);
  --cx-glow-cyan:0 0 0 1px rgba(56,189,248,.25), 0 10px 50px rgba(56,189,248,.20);
  --cx-shadow-1:0 10px 30px rgba(8,20,40,.10);
  --cx-shadow-2:0 24px 80px rgba(8,20,40,.20);

  /* Gradientes cinematográficos */
  --cx-grad-hero:radial-gradient(1200px 600px at 15% -10%, rgba(56,189,248,.18), transparent 60%),
                 radial-gradient(1000px 700px at 110% 10%, rgba(124,92,255,.16), transparent 55%),
                 linear-gradient(160deg,#0A1A30 0%, #0C2340 45%, #102B4F 100%);
  --cx-grad-gold:linear-gradient(100deg,#C4A24E,#EBD9A8 45%,#C4A24E 90%);
  --cx-grad-tech:linear-gradient(120deg,#38BDF8,#7C5CFF);

  /* Movimiento */
  --cx-ease:cubic-bezier(.22,1,.36,1);
  --cx-ease-out:cubic-bezier(.16,1,.3,1);
  --cx-dur:.7s;
}