/* ============================================================
   unky.app · tokens de diseño
   Único lugar donde viven los colores. Nada de hex sueltos
   en los componentes.
   ============================================================ */

:root {
  /* --- Superficies ------------------------------------------------ */
  --bg: #150E28;
  --surface: #261A45;
  --surface-2: #33245C;
  --line: #412E71;
  --line-2: #57409A;

  /* --- Texto ------------------------------------------------------ */
  --text: #F7F3FF;
  --muted: #B3A4DB;
  --dim: #8272BA;

  /* --- Botones de respuesta --------------------------------------
     Sin verde ni rojo: esos dos significan "correcta" y "fallada"
     en la pantalla de resultados y no pueden significar otra cosa
     en el mando. Ver CLAUDE.md.
     Estos colores DEBEN coincidir con los del video.
     ---------------------------------------------------------------- */
  --key-a: #FFC53D;  --key-a-ink: #4A3400;  --key-a-shadow: #BF9014;
  --key-b: #4C8DFF;  --key-b-ink: #052A66;  --key-b-shadow: #2360C4;
  --key-c: #00D6C4;  --key-c-ink: #00382F;  --key-c-shadow: #029287;
  --key-d: #FF4D9D;  --key-d-ink: #520A2E;  --key-d-shadow: #C41F6E;

  /* --- Semántica de resultados ------------------------------------ */
  --ok: #3DE07A;   --ok-ink: #01381E;
  --no: #FF5A4D;   --no-ink: #4E0F09;
  --warn: var(--key-a);

  /* --- Marca ------------------------------------------------------ */
  --brand: var(--key-a);
  --brand-ink: var(--key-a-ink);
  --brand-shadow: var(--key-a-shadow);

  /* --- Forma ------------------------------------------------------ */
  --r-sm: 11px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* --- Tipografía -------------------------------------------------- */
  /* Una sola familia en toda la app. Los dos nombres se quedan porque los
     papeles siguen siendo distintos: display va en 700/800 con el tracking
     apretado, ui en 400/500/600 con el tracking normal. */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-ui: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;

  /* --- Ritmo ------------------------------------------------------- */
  --shell-max: 500px;
  --pad-x: 20px;
}