/* Tokens de la identidad de Kreolix (nombre de trabajo; sin ™ ni ®). Guía completa: MARCA.md.
   Este archivo no tiene nada propio de la página de presentación: el panel de juegos puede copiarlo tal cual. */
:root {
  /* Color: marca */
  --kx-tinta: #17142e;        /* texto y fondos oscuros */
  --kx-violeta: #5b3df5;      /* acción principal; blanco encima: 6,1:1 */
  --kx-violeta-fuerte: #4528d6; /* hover/pulsado de lo violeta */
  --kx-coral: #ff6b4a;        /* acento; texto --kx-tinta encima: 6,2:1 */
  --kx-sol: #ffc93c;          /* destacado y foco sobre fondo oscuro; texto --kx-tinta encima */
  --kx-cielo: #8fd3ff;        /* ilustraciones, cielos */
  /* Color: neutros y estados */
  --kx-papel: #fbfaff;        /* fondo de página */
  --kx-lavanda: #efeaff;      /* superficies suaves, tarjetas */
  --kx-borde: #d9d2f5;
  --kx-gris: #55526e;         /* texto secundario; sobre --kx-papel 7,3:1 */
  --kx-ok: #0b6b50;           /* éxito (texto) */
  --kx-ok-fondo: #d9f5ec;
  --kx-error: #b3222f;        /* error (texto) */
  --kx-error-fondo: #fde4e6;
  --kx-aviso: #7a4a00;        /* aviso (texto) */
  --kx-aviso-fondo: #fff0c9;
  --kx-foco: #5b3df5;         /* anillo de foco sobre fondo claro; en oscuro usa --kx-sol */
  /* Espaciado (base 4 px) */
  --kx-e1: 4px; --kx-e2: 8px; --kx-e3: 12px; --kx-e4: 16px; --kx-e5: 24px; --kx-e6: 32px; --kx-e7: 48px; --kx-e8: 64px; --kx-e9: 96px;
  /* Radios */
  --kx-r-s: 8px; --kx-r-m: 14px; --kx-r-l: 22px; --kx-r-pildora: 999px;
  /* Sombras */
  --kx-sombra-1: 0 2px 8px rgba(23, 20, 46, .10);
  --kx-sombra-2: 0 10px 28px rgba(23, 20, 46, .16);
  /* Tipografía: solo del sistema (nada se descarga) */
  --kx-fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --kx-fuente-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --kx-t-xs: .8125rem; --kx-t-s: .9375rem; --kx-t-m: 1rem; --kx-t-l: 1.25rem; --kx-t-xl: 1.625rem; --kx-t-2xl: clamp(1.875rem, 1.2rem + 2.6vw, 2.75rem); --kx-t-3xl: clamp(2.25rem, 1.3rem + 4.2vw, 3.875rem);
  /* Movimiento */
  --kx-dur: 160ms;
  /* Mínimo táctil */
  --kx-toque: 48px;
}

/* Botones y foco: componentes de la marca. */
.kx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--kx-e2);
  min-height: var(--kx-toque); padding: var(--kx-e3) var(--kx-e5);
  border: 2px solid transparent; border-radius: var(--kx-r-pildora);
  font: 800 var(--kx-t-m)/1.2 var(--kx-fuente); text-decoration: none; cursor: pointer;
  background: var(--kx-violeta); color: #fff;
  transition: background var(--kx-dur), transform var(--kx-dur);
}
.kx-btn:hover { background: var(--kx-violeta-fuerte); }
.kx-btn:active { transform: translateY(1px); }
.kx-btn--coral { background: var(--kx-coral); color: var(--kx-tinta); }
.kx-btn--coral:hover { background: #ff8267; }
.kx-btn--borde { background: transparent; color: inherit; border-color: currentColor; }
.kx-btn--borde:hover { background: rgba(255, 255, 255, .12); }
.kx-btn--grande { min-height: 56px; padding: var(--kx-e4) var(--kx-e6); font-size: var(--kx-t-l); }
:where(a, button, summary, input, select, textarea):focus-visible { outline: 3px solid var(--kx-foco); outline-offset: 3px; }
.kx-oscuro :where(a, button, summary):focus-visible { outline-color: var(--kx-sol); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}