/*
 * Xakrom-Web · demos-shared · tokens.css · v3
 *
 * Paleta, tipografía y geometría comunes de las demos embebidas (DEMO_Contrato §7).
 * Espejo de la app, como toda la imagen de la web (D-018): los valores salen de
 * WEB_Libro_Estilos, que los toma de la app desplegada. Los colores de personaje son de
 * CHARS_Marca_Visual y el contrato de accesibilidad, de TECH_Accesibilidad, los dos
 * propiedad de XAKROM: se consultan, no se editan desde aquí.
 * Ninguna demo declara un color literal; todas usan estas propiedades.
 *
 * v3: la preferencia del botón de accesibilidad del sitio (D-025). frame.js escribe
 * --xk-fontscale y data-contrast en el <html> de la demo con lo que le baja la página, y
 * aquí están los dos efectos: la raíz crece con el factor, y el alto contraste tiene los
 * mismos valores que el del sitio. Con data-contrast="normal" se apaga, aunque el sistema
 * lo pida, igual que en xakrom-css-sitio.
 */

/* Tipografía autoalojada: Geist, la de la aplicación, con licencia SIL OFL 1.1
   (fonts/OFL.txt). Subconjunto latino, que cubre inglés y español. */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/geist-latin-wght-normal.woff2?v=1") format("woff2-variations"),
       url("fonts/geist-latin-wght-normal.woff2?v=1") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Tamaño de letra: toda la demo está en rem, así que el factor que baja la página
     (1, 1,25 o 1,5) mueve la escala entera desde aquí. Sin preferencia, 1. */
  font-size: calc(100% * var(--xk-fontscale, 1));

  /* Fondos de la app. WEB_Libro_Estilos §3.1. */
  --xk-navy-900: #0A1526;   /* fondo principal */
  --xk-navy-850: #0D1D34;   /* cromo */
  --xk-navy-800: #13233F;   /* tarjetas */
  --xk-navy-750: #18294A;   /* tarjeta bajo el puntero */
  --xk-navy-700: #172640;   /* elevado: menús, paneles y lo activo */

  /* Texto de la app. */
  --xk-ink-100: #FFFFFF;    /* titulares y cuerpo */
  --xk-ink-300: #C3CCD9;    /* atenuado: etiquetas, antetítulos y pies */
  --xk-ink-500: #7F8AA0;    /* solo estados desactivados */

  /* Acento de la app: acción principal, foco, iconos, rellenos y lo activo. */
  --xk-blue-500: #4FA6E8;
  --xk-blue-300: #7CC0F2;   /* el acento cuando es texto */
  --xk-blue-900: #13314F;   /* fondo de insignias */
  --xk-on-blue: #0A1616;    /* texto sobre el acento */
  --xk-blue-subtle: rgb(79 166 232 / 0.10);
  --xk-blue-line: rgb(79 166 232 / 0.30);

  /* Líneas de la app. */
  --xk-border: #24344F;       /* separadores */
  --xk-border-light: #33465F; /* controles */

  /* Colores de personaje, versión luminosa. CHARS_Marca_Visual §1 y §2.
     Solo donde hay un personaje, siempre con su nombre (WEB_Guia §9), y nunca como
     color de interfaz ni de texto (WEB_Libro_Estilos §2). */
  --xk-katherine: #A020F0;
  --xk-lucas: #FFCC00;
  --xk-ingrid: #5BCCFF;
  --xk-kenji: #0073C4;
  --xk-astrid: #6ED140;
  --xk-khalid: #FE0000;

  /* Geometría de marca. Parrilla de 3x2 (CHARS_Marca_Visual §2): Katherine, Lucas e
     Ingrid en la primera fila; Khalid, Astrid y Kenji en la segunda. El hexágono se
     reserva para los personajes; el ciclo tiene forma propia, su anillo (WEB_Guia §4.4). */

  /* Papeles. */
  --xk-bg: var(--xk-navy-900);
  --xk-surface: var(--xk-navy-800);
  --xk-raise: var(--xk-navy-700);
  --xk-line: var(--xk-border);
  --xk-line-strong: var(--xk-border-light);
  --xk-text: var(--xk-ink-100);
  --xk-text-muted: var(--xk-ink-300);
  --xk-text-strong: var(--xk-ink-100);
  --xk-text-disabled: var(--xk-ink-500);
  --xk-accent: var(--xk-blue-500);
  --xk-accent-dim: var(--xk-blue-900);
  --xk-accent-subtle: var(--xk-blue-subtle);
  --xk-accent-line: var(--xk-blue-line);
  --xk-action-bg: var(--xk-accent);
  --xk-action-text: var(--xk-on-blue);
  --xk-focus: var(--xk-accent);
  --xk-progress: var(--xk-accent);
  --xk-progress-track: var(--xk-border-light);

  /* Tipografía: la escala de la app, en rem (TECH_Accesibilidad, regla 1).
     Suelo de lectura, --xk-text-s; --xk-text-label, solo en rótulos breves en versales.
     Peso máximo, 600. WEB_Libro_Estilos §4. */
  --xk-font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --xk-text-label: 0.6875rem;  /* 11 px */
  --xk-text-s: 0.875rem;       /* 14 px */
  --xk-text-btn: 0.9375rem;    /* 15 px */
  --xk-text-m: 1rem;           /* 16 px */
  --xk-text-l: 1.1875rem;      /* 19 px */
  --xk-text-xl: 1.5625rem;     /* 25 px */
  --xk-leading: 1.6;

  /* Espacio: base de 4 px, con los pasos de la app. WEB_Libro_Estilos §5. */
  --xk-space-1: 0.25rem;  /*  4 px */
  --xk-space-2: 0.5rem;   /*  8 px */
  --xk-space-3: 0.75rem;  /* 12 px */
  --xk-space-4: 1rem;     /* 16 px */
  --xk-space-5: 1.25rem;  /* 20 px */
  --xk-space-6: 1.5rem;   /* 24 px */
  --xk-space-7: 2.5rem;   /* 40 px */
  --xk-space-8: 3rem;     /* 48 px */

  /* Radios de la app: botones y campos, tarjetas, paneles, reserva e insignias. */
  --xk-radius-s: 6px;
  --xk-radius-m: 10px;
  --xk-radius-l: 14px;
  --xk-radius-xl: 18px;
  --xk-radius-pill: 20px;

  /* Foco y objetivo táctil. WEB_Libro_Estilos §6.7. */
  --xk-focus-width: 2px;
  --xk-focus-offset: 2px;
  --xk-target: 2.75rem;

  /* Movimiento de la app: color y bordes, tarjetas, y barras de avance. */
  --xk-duration-fast: 0.15s;
  --xk-duration: 0.25s;
  --xk-ease: ease;
  --xk-ease-progress: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Alto contraste: los valores del modo alto de la app (WEB_Libro_Estilos §3.5).
   Entra por el botón de accesibilidad del sitio, que baja hasta aquí por frame.js
   (data-contrast="high"), y también cuando lo pide el sistema, salvo que la persona lo
   haya apagado en el panel (data-contrast="normal"). Es el mismo par de reglas que
   xakrom-css-sitio aplica en la página, para que dentro y fuera del iframe cambien a la vez. */
:root[data-contrast="high"] {
  --xk-navy-900: #050E1C;
  --xk-navy-850: #050E1C;
  --xk-navy-800: #0E1B30;
  --xk-navy-750: #16243D;
  --xk-navy-700: #16243D;
  --xk-ink-300: #D5DCE8;
  --xk-ink-500: #97A2B8;
  --xk-blue-500: #7CC0F2;
  --xk-blue-300: #A6D6F8;
  --xk-blue-900: #123048;
  --xk-blue-subtle: rgb(124 192 242 / 0.22);
  --xk-blue-line: rgb(124 192 242 / 0.55);
  --xk-border: #4A5A76;
  --xk-border-light: #5A6A86;
}

@media (prefers-contrast: more) {
  :root:not([data-contrast="normal"]) {
    --xk-navy-900: #050E1C;
    --xk-navy-850: #050E1C;
    --xk-navy-800: #0E1B30;
    --xk-navy-750: #16243D;
    --xk-navy-700: #16243D;
    --xk-ink-300: #D5DCE8;
    --xk-ink-500: #97A2B8;
    --xk-blue-500: #7CC0F2;
    --xk-blue-300: #A6D6F8;
    --xk-blue-900: #123048;
    --xk-blue-subtle: rgb(124 192 242 / 0.22);
    --xk-blue-line: rgb(124 192 242 / 0.55);
    --xk-border: #4A5A76;
    --xk-border-light: #5A6A86;
  }
}