/*
 * Tokens de marca — Oriental Brand Identity Guidelines 2026.
 * Este es el único archivo que hay que tocar para ajustar colores y tipografía.
 */

/*
 * Radion A (licenciada). Cuando lleguen los archivos, copiarlos a assets/fonts/,
 * descomentar estos bloques y agregarlos a la lista PRECACHE de sw.js.
 *
 * @font-face {
 *   font-family: "Radion A";
 *   src: url("../assets/fonts/RadionA-Book.woff2") format("woff2");
 *   font-weight: 400;
 *   font-display: block;
 * }
 * @font-face {
 *   font-family: "Radion A";
 *   src: url("../assets/fonts/RadionA-Demi.woff2") format("woff2");
 *   font-weight: 600;
 *   font-display: block;
 * }
 */

:root {
  /* Paleta primaria */
  --black: #000000;
  --white: #FFFFFF;
  --orange: #F56A00;

  /* Paleta secundaria: solo acentos, siempre con negro */
  --neon-yellow: #EEFF90;
  --pink: #F895FF;
  --deep-blue: #0042C6;

  /* Grises UI */
  --grey-300: #BFBFBF;
  --grey-200: #D6D6D6;
  --grey-100: #E6E7E8;

  /* Roles */
  --idle-bg: var(--black);
  --idle-text: var(--white);
  --key-bg: var(--white);
  --key-text: var(--black);
  --key-pressed-bg: var(--grey-200);
  --enter-bg: var(--orange);
  --enter-text: var(--black);
  --clear-bg: transparent;
  --clear-text: var(--white);
  --clear-border: var(--white);
  --pin-ring: var(--white);
  --pin-dot: var(--orange);
  --approved-bg: var(--orange);
  --approved-text: var(--black);
  --approved-mark: var(--white);

  /* Tipografía: fallback oficial Arial (p. 52) */
  --font: "Radion A", Arial, Helvetica, sans-serif;
  --weight-body: 400;   /* Book / Regular */
  --weight-head: 600;   /* Demi */
  --leading-head: 1.02; /* rango permitido 96–108 % */
}