/* ================================================================
   FRAN96MC.ES — SISTEMA DE DISEÑO COMPARTIDO
   includes/tokens.css — ÚNICA FUENTE DE VERDAD DE TOKENS.
   Los bloques :root y body.atardecer están copiados EXACTAMENTE de
   portada/portada.css (líneas 11-71 y 75-86): si algún día cambian
   allí, deben cambiar aquí (y viceversa). Al final se AÑADEN los
   tokens nuevos del rediseño (acentos por categoría, estados,
   easings y acento de página). Ningún otro archivo debe declarar
   colores en hexadecimal: siempre var(--...) de esta hoja.
   ================================================================ */

/* ----------------------------------------------------------------
   1) TOKENS BASE (copiados de portada/portada.css:11-71)
   Cielo, tinta, paneles, acentos mágicos, agua, astro, recorte
   pixel, tipografías, easing base y escala z semántica.
   ---------------------------------------------------------------- */
:root{
  /* Cielo nocturno (por defecto) */
  --cielo-1:#04051a;
  --cielo-2:#0c0e33;
  --cielo-3:#1a1b4e;
  --cielo-4:#2d2768;
  --horizonte:rgba(122,88,255,.28);

  /* Tinta y superficies */
  --tinta:#eef0ff;
  --tinta-suave:#c9cdf4;
  --tinta-tenue:#9aa0d6;
  --panel:#101130;
  --panel-2:#181940;
  --panel-borde:#3b3e7c;
  --panel-borde-luz:#565aa8;

  /* Acentos mágicos */
  --oro:#ffcf5c;
  --oro-vivo:#ffe59a;
  --cian:#59e0ff;
  --violeta:#a689ff;
  --verde:#6dffa0;
  --magenta:#ff7ae0;
  --fuego:#ffab4a;

  /* Agua */
  --agua-1:#0e1e56;
  --agua-2:#0a1440;
  --agua-brillo:rgba(89,224,255,.5);

  /* Luna / sol */
  --astro:#f4f1e0;
  --astro-halo:rgba(244,241,224,.16);

  /* Pixel */
  --px:4px;
  --recorte-px:polygon(
    0 12px,4px 12px,4px 8px,8px 8px,8px 4px,12px 4px,12px 0,
    calc(100% - 12px) 0,calc(100% - 12px) 4px,calc(100% - 8px) 4px,
    calc(100% - 8px) 8px,calc(100% - 4px) 8px,calc(100% - 4px) 12px,100% 12px,
    100% calc(100% - 12px),calc(100% - 4px) calc(100% - 12px),
    calc(100% - 4px) calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),
    calc(100% - 8px) calc(100% - 4px),calc(100% - 12px) calc(100% - 4px),
    calc(100% - 12px) 100%,12px 100%,12px calc(100% - 4px),8px calc(100% - 4px),
    8px calc(100% - 8px),4px calc(100% - 8px),4px calc(100% - 12px),0 calc(100% - 12px)
  );

  --f-pixel:'Press Start 2P',monospace;
  --f-cuerpo:'Rubik','Segoe UI',system-ui,-apple-system,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* Escala z semántica */
  --z-fondo:0;
  --z-contenido:10;
  --z-barra:20;
  --z-hud:25;
  --z-nav:30;
  --z-gate:40;
  --z-warp:50;

  /* --------------------------------------------------------------
     2) ACENTOS POR CATEGORÍA (NUEVOS)
     Cada gran área del sitio tiene su color propio, siempre como
     alias de un acento mágico base. Usarlos en tarjetas, enlaces
     y transiciones que apunten a cada categoría.
     -------------------------------------------------------------- */
  --acento-aula-de-fran:var(--magenta);   /* El Aula de Fran */
  --acento-docencia-ia:var(--violeta); /* DocencIA */
  --acento-aula-virtual:var(--oro);        /* Aula Virtual */
  --acento-oposiciones:var(--cian);     /* Oposiciones */
  --acento-tienda:var(--verde);       /* Tienda */
  --acento-zona-pruebas:var(--fuego); /* Zona de Pruebas (taller, no público) */

  /* --------------------------------------------------------------
     3) TOKENS SEMÁNTICOS DE ESTADO (NUEVOS)
     Para mensajes, validación de formularios, avisos del gate…
     Nunca usar los hex directamente: siempre estos nombres.
     -------------------------------------------------------------- */
  --error:#ff6a6a;        /* fallo, PIN incorrecto, campo inválido */
  --exito:var(--verde);   /* confirmación, envío correcto */
  --aviso:var(--fuego);   /* advertencia, atención requerida */

  /* --------------------------------------------------------------
     4) MOVIMIENTO (NUEVOS)
     Easing con rebote para entradas (back.out(1.4)) y duraciones
     estándar: micro-interacciones (hover, focus) y entradas de
     elementos (reveals, staggers). Animar SOLO transform/opacity.
     -------------------------------------------------------------- */
  --ease-back:cubic-bezier(0.34,1.56,0.64,1); /* rebote de entrada */
  --dur-micro:.2s;    /* micro-transiciones: hover, active, focus */
  --dur-entrada:.4s;  /* entradas/reveals de componentes */

  /* --------------------------------------------------------------
     5) ACENTO DE PÁGINA (NUEVO)
     El acento activo de la página actual. Cada página lo puede
     sobreescribir en su propio :root o en body, por ejemplo:
       body{ --acento-pagina:var(--acento-oposiciones); }
     Los componentes de includes/componentes.css lo consumen para
     hovers, focus y detalles, de modo que toda la página "vira"
     al color de su categoría sin tocar los componentes.
     -------------------------------------------------------------- */
  --acento-pagina:var(--oro);
}

/* ----------------------------------------------------------------
   6) MODO ATARDECER (copiado de portada/portada.css:75-86)
   Alterna con el botón 🌅 del HUD. Mantiene el contraste del texto:
   el cielo se calienta, nunca se aclara del todo.
   ---------------------------------------------------------------- */
body.atardecer{
  --cielo-1:#160a2e;
  --cielo-2:#33124d;
  --cielo-3:#652a55;
  /* Cielo bajo oscurecido (#a4484b aclaraba demasiado la franja
     inferior): con #7c3540, --tinta-suave da 5,5:1 sobre él */
  --cielo-4:#7c3540;
  /* La tinta tenue se acerca al blanco para sostener 4,5:1 también
     sobre el cielo bajo del atardecer */
  --tinta-tenue:#b7bce6;
  --horizonte:rgba(255,150,80,.4);
  --agua-1:#3a1c50;
  --agua-2:#1c0e38;
  --agua-brillo:rgba(255,171,74,.5);
  --astro:#ffb347;
  --astro-halo:rgba(255,179,71,.22);
}