/* Cemento APU — tokens para la Trivia EXCON 2026.
   FUENTE: el design system consolidado del manual de marca
   (MANUAL APU 03.2024, Brandlab). Reemplaza la captura del sitio
   cementoapu.com que se usó hasta el 28-set: el sitio NO está alineado
   con el manual, así que sus valores no sirven de referencia.

   El juego corre en el TEMA NEGRO del sistema, que es como abre el manual.
   Los tres temas existen; acá se resuelven los tokens semánticos a ese.
   Todo valor de marca es exacto del sistema. Lo que agrega este archivo es
   solo la escala táctil del tótem, marcada TOTEM. */

:root {
  /* ---- Paleta del manual ---- */
  --apu-amarillo:     #FFC709;  /* Pantone 7548C · el color principal */
  --apu-negro:        #000000;  /* Pantone Black C · color único del logotipo */
  --apu-blanco:       #FFFFFF;
  --apu-gris-700:     #58595B;
  --apu-gris-600:     #6D6E71;
  --apu-gris-400:     #939598;
  --apu-gris-200:     #C7C8CA;
  --apu-gris-050:     #F1F1F2;
  --apu-gris-900:     #1A1A1A;  /* superficie elevada del tema Negro */
  --apu-plateado:     #B8BABC;
  --apu-danger:       #FF8A7A;  /* valor del tema Negro. Adición digital */

  /* ---- Tokens semánticos, resueltos al TEMA NEGRO ---- */
  --surface:        var(--apu-negro);
  --surface-alt:    var(--apu-gris-900);
  --ink:            var(--apu-blanco);
  --ink-muted:      var(--apu-gris-200);
  --accent:         var(--apu-amarillo);
  --on-accent:      var(--apu-negro);
  --action:         var(--apu-amarillo);
  --on-action:      var(--apu-negro);
  --rule:           var(--apu-blanco);
  --hairline:       var(--apu-gris-700);
  --control-border: var(--apu-gris-400);
  --focus:          var(--apu-amarillo);
  --danger:         var(--apu-danger);

  /* ---- Tipografía ----
     United Sans es la principal. Los archivos con licencia que hay son el
     corte Condensed (Black y Medium). El manual nombra SemiCond para display
     y Reg para cuerpo: falta confirmar si el corte licenciado es el que pide
     el manual. Los sustitutos son los que el propio sistema declara. */
  --apu-font-display: "UnitedSansCd", "United Sans SemiCond", "Saira Semi Condensed", sans-serif;
  --apu-font-texto:   "United Sans Reg", "United Sans", Saira, system-ui, sans-serif;

  /* ---- Forma. El manual es tajante: todo es angular ---- */
  --radius:         0px;      /* botones, tarjetas, imágenes: TODO */
  --radius-full:    9999px;   /* solo contenedores circulares de ícono */
  --rule-width:     3px;      /* filete que abre sección */
  --hairline-width: 1px;

  /* ---- Sin efectos ----
     El manual prohíbe sombras, brillos, degradados y outlines sobre la marca
     (usos incorrectos 02 y 07). Por eso no hay tokens de sombra: si hace
     falta separar algo, se separa con filete o con superficie, no con sombra. */
}

/* ---- TOTEM: escala táctil ----
   Referencia 1080 × 1920 (9:16). En vh, para que el mismo build sirva en
   1080×1920, en 4K y en un 75" (RNF-08). La escala tipográfica del manual
   está pensada para leer a 50 cm; el tótem se lee a 1.5 m, así que los
   tamaños suben, pero se conservan la familia, el peso y la caja de cada
   estilo del sistema. */
:root {
  --t-enunciado:  3.2vh;   /*  61 px ref · estilo display-2: display 900 MAYÚSCULAS */
  --t-opcion:     2.3vh;   /*  44 px ref · estilo body: texto 400, caja alta y baja. MÍNIMO */
  --t-pista:      2.1vh;   /*  40 px ref · estilo body */
  --t-cta:        3.1vh;   /*  60 px ref · display 900 MAYÚSCULAS */
  --t-frase:      2.6vh;   /*  50 px ref */
  --t-label:      2vh;     /*  38 px ref · estilo label: 700 MAYÚSCULAS, +0.08em */

  --alto-opcion:  9.4vh;   /* 180 px ref · mínimo táctil (RNF-06) */
  --gap-opcion:   1.6vh;
  --margen-lat:   4.6vh;   /*  88 px ref · equivale al gutter del manual */
  --chamfer:      1.3vh;   /*  25 px ref · corte a 45° en una esquina del CTA primario */
  --trama-rombo:  6.2vh;   /* 120 px ref · diagonal del rombo de la trama */

  --ls-label:     .08em;   /* el manual: +0.08em en label, no más */
  --mov:          150ms;   /* techo de movimiento. Sin rebotes ni elásticos */
}

/* ---- Contrastes verificados sobre el tema Negro ----
   amarillo #FFC709 sobre negro ....... 13.4:1  ✔ es la combinación de la marca
   blanco sobre negro ................. 21:1    ✔
   gris-200 #C7C8CA sobre negro ....... 12.5:1  ✔ texto secundario
   danger #FF8A7A sobre negro .......... 9.2:1  ✔
   negro sobre amarillo ............... 13.4:1  ✔ es el CTA
   BLANCO SOBRE AMARILLO ............... 1.56:1 ✘ el manual lo prohíbe explícitamente

   El manual no define un color de éxito. El acierto NO se marca con verde
   inventado: se marca con el amarillo de marca, el check y la palabra que se
   suma a la frase. De paso desaparece el problema del par rojo/verde.
   El error lleva danger MÁS el rombo con "!" MÁS texto, nunca solo color. */

/* ---- Voz ----
   Directo, concreto, en tuteo. Titulares en MAYÚSCULAS, texto corrido en
   oración. Sin emojis: para énfasis van los elementos de soporte del manual
   (rombo con número, círculo con !). Claim de campaña: FUERTE Y RESISTENTE. */