/* Tokens de la landing de preinscripción de la UIC.
   :root = tema claro de la línea ASE · html.tema-oscuro = oscuro de la línea ASE ·
   html.variante-b re-mapea las dos a la paleta navy del kit UIC. Las variantes A y C no agregan
   clase de paleta: A usa la línea ASE completa y C restringe su uso al bordó desde su propio CSS.

   Contrastes (WCAG, calculados con scratchpad/contraste.py el 2026-10-09; texto ≥ 4,5:1, UI ≥ 3:1):

   ASE claro (fondo #FAF8F4)                       ASE oscuro (fondo #17130F)
     tinta #1F2937 ............ 13,84                tinta #EFE7DA ............ 15,06
     tinta-2 #5C534B ...........  7,09 (hoja 7,40)   tinta-2 #B3A898 ..........  7,89 (hoja 7,22)
     acento (bordó) #8C1C2B ....  8,55                acento-texto #E07A84 .....  6,41
     acento-fuerte #6E121E .... 11,20                blanco sobre #A8323C .....  6,59 (botón)
     blanco sobre #8C1C2B ......  9,07 (botón)        dorado #C9A227 ...........  7,64 (sirve como texto)
     dorado #A47E1B ............  3,55 → solo UI      borde-control #7C746B ....  4,02
     dorado-texto #7A5C10 ......  5,88                ok #7FB596 ...............  7,88
     borde-control #8A8175 .....  3,61                navy #1B2A4A sobre pastilla papel 13,41 (logo QNTLC)
     ok #2F6B4F ................  5,93

   UIC B claro (fondo #F5F0E8)                      UIC B oscuro (fondo navy #1B2A4A)
     navy #1B2A4A ............. 12,54                crema #F5F0E8 ............ 12,54
     tinta-2 #4A4F5C ...........  7,22                tinta-2 #B8C0D0 ..........  7,78
     bordó #6B1D3A .............  9,94                dorado #C9A84C ...........  6,22 (texto y botón)
     crema sobre navy ......... 12,54 (botón)         navy sobre dorado ........  6,22 (texto del botón)
     blanco sobre #6B1D3A ..... 11,28                bordó claro #E08BA6 ......  5,70
     dorado #C9A84C ............  2,01 → NUNCA texto, borde-control #8591A8 ....  4,48
                                 solo filetes gruesos ok #8FCDA8 ...............  7,76
     dorado-texto #7A5C10 ......  5,50
     borde-control #7D7A72 .....  3,78
     ok #2F6B4F ................  5,55

   Regla que sale de la tabla: el dorado de marca es un color de filete, barra y ornamento; para
   escribir con dorado se usa siempre --dorado-texto. */

:root {
  color-scheme: light;

  /* Superficies */
  --fondo: #FAF8F4;
  --hoja: #FFFDFA;
  --hundido: #F2EDE3;
  --pastilla-logo: transparent;

  /* Texto */
  --tinta: #1F2937;
  --tinta-2: #5C534B;

  /* Acento: bordó de la línea ASE */
  --acento: #8C1C2B;
  --acento-fuerte: #6E121E;
  --acento-texto: #8C1C2B;      /* el acento usado como color de letra */
  --sobre-acento: #FFFFFF;      /* letra sobre un fondo de acento */
  --acento-suave: rgba(140, 28, 43, 0.08);

  /* Dorado */
  --dorado: #A47E1B;
  --dorado-texto: #7A5C10;
  --dorado-suave: rgba(164, 126, 27, 0.14);

  /* Líneas y controles */
  --linea: #E4DCCF;
  --borde-control: #8A8175;
  --foco: #8C1C2B;
  --ok: #2F6B4F;
  --error: #8C1C2B;

  /* Sombras: suaves, cálidas, nunca negras */
  --sombra-1: 0 1px 2px rgba(31, 26, 23, 0.06), 0 2px 8px rgba(31, 26, 23, 0.05);
  --sombra-2: 0 2px 6px rgba(31, 26, 23, 0.07), 0 12px 32px rgba(31, 26, 23, 0.09);

  /* Espaciado (base 4 px) */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px; --e5: 24px;
  --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px; --e10: 128px;

  /* Radios */
  --r1: 2px; --r2: 6px; --r3: 12px;

  /* Tipografía */
  --serif: 'Source Serif 4', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Source Sans 3', 'Segoe UI', 'Helvetica Neue', sans-serif;
  --t-display: clamp(2.5rem, 1.6rem + 3.6vw, 5.25rem);
  --t-h1: clamp(2rem, 1.45rem + 2.2vw, 3.5rem);
  --t-h2: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
  --t-h3: clamp(1.2rem, 1.1rem + 0.4vw, 1.5rem);
  --t-cuerpo: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --t-pequeno: 0.875rem;
  --interlineado-texto: 1.55;
  --interlineado-titulo: 1.12;

  /* Anchos */
  --ancho-lectura: 68ch;
  --ancho-maximo: 1720px;
  --margen: clamp(16px, 4vw, 64px);

  /* Movimiento */
  --rapida: 160ms;
  --media: 320ms;
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
}

html.tema-oscuro {
  color-scheme: dark;
  --fondo: #17130F;
  --hoja: #211C16;
  --hundido: #120F0C;
  --pastilla-logo: #FAF8F4;

  --tinta: #EFE7DA;
  --tinta-2: #B3A898;

  --acento: #A8323C;
  --acento-fuerte: #E07A84;
  --acento-texto: #E07A84;
  --sobre-acento: #FFFFFF;
  --acento-suave: rgba(224, 122, 132, 0.12);

  --dorado: #C9A227;
  --dorado-texto: #C9A227;
  --dorado-suave: rgba(201, 162, 39, 0.16);

  --linea: #352E26;
  --borde-control: #7C746B;
  --foco: #E07A84;
  --ok: #7FB596;
  --error: #E07A84;

  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.25);
  --sombra-2: 0 2px 6px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.4);
}

/* Variante B · kit UIC: crema y navy de día, navy y dorado de noche */
html.variante-b {
  --fondo: #F5F0E8;
  --hoja: #FDF8F0;
  --hundido: #ECE5D8;

  --tinta: #1B2A4A;
  --tinta-2: #4A4F5C;

  --acento: #1B2A4A;
  --acento-fuerte: #6B1D3A;
  --acento-texto: #6B1D3A;
  --sobre-acento: #F5F0E8;
  --acento-suave: rgba(27, 42, 74, 0.08);

  --dorado: #C9A84C;
  --dorado-texto: #7A5C10;
  --dorado-suave: rgba(201, 168, 76, 0.18);

  --linea: #DED5C4;
  --borde-control: #7D7A72;
  --foco: #6B1D3A;
  --ok: #2F6B4F;
  --error: #6B1D3A;
}

html.variante-b.tema-oscuro {
  --fondo: #1B2A4A;
  --hoja: #223556;
  --hundido: #152239;
  --pastilla-logo: #F5F0E8;

  --tinta: #F5F0E8;
  --tinta-2: #B8C0D0;

  --acento: #C9A84C;
  --acento-fuerte: #E08BA6;
  --acento-texto: #C9A84C;
  --sobre-acento: #1B2A4A;
  --acento-suave: rgba(201, 168, 76, 0.14);

  --dorado: #C9A84C;
  --dorado-texto: #C9A84C;
  --dorado-suave: rgba(201, 168, 76, 0.16);

  --linea: #34476B;
  --borde-control: #8591A8;
  --foco: #C9A84C;
  --ok: #8FCDA8;
  --error: #E08BA6;

  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.25);
  --sombra-2: 0 2px 6px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.4);
}