/* ============================================================
   Carrera Pro — TOKENS DEL DESIGN SYSTEM

   🔴 Todo valor visual del juego sale de acá. Un color, un tamaño de
   letra, un radio o una duración escritos a mano en otro archivo los
   frena el chequeo (node tools/chequear.js). Si falta algo, se agrega
   ACÁ primero, con su uso, y después se usa.

   La guía —qué token va dónde, cuándo se crea uno nuevo— vive en
   docs/design-system.md. La galería con todo a la vista: galeria.html.
   ============================================================ */

:root {
  /* el juego vive siempre en oscuro: los controles nativos lo siguen */
  color-scheme: dark;

  /* ---------- la paleta del cliente (crudos: el resto la usa por nombre) ----------
     Oro = la estructura (marcos, títulos, lo elegido). Cian = la magia
     (el botón que hace algo, lo tuyo, el foco). Lo demás, azul noche. */
  --oro-1:  #f0e6d2;   /* el texto principal y el brillo del marco */
  --oro-2:  #c8aa6e;   /* EL oro: marcos, títulos, lo elegido */
  --oro-3:  #c89b3c;   /* el medio del degradé del marco */
  --oro-4:  #785a28;   /* el pie del marco, el borde en hover */
  --oro-5:  #463714;   /* el borde de un control */
  --oro-6:  #32281e;   /* el fondo de un hover dorado */
  --oro-txt: #cdbe91;  /* la letra de un botón común */
  --cian-1: #cdfafa;   /* la letra sobre lo mágico */
  --cian-2: #0ac8b9;   /* el brillo hextech: el acento */
  --cian-3: #0397ab;
  --cian-4: #005a82;
  --cian-5: #0a323c;   /* el fondo del botón mágico */
  --cian-6: #061c25;   /* el pie del fondo del botón mágico */
  --gris-1: #a09b8c;
  --gris-2: #5b5a56;   /* deshabilitado */
  --gris-3: #3c3c41;
  --gris-4: #1e2328;   /* el fondo de un botón común */

  /* ---------- superficies (de atrás hacia adelante) ---------- */
  --bg:          #010a13;   /* la página: el negro hextech */
  --bg-2:        #0a1428;   /* paneles grandes: ficha, tarjetas, modales */
  --panel:       #101c2c;   /* cajas dentro de un panel: inputs, cartas */
  --panel-2:     #16243a;   /* hover de lo anterior */
  --panel-3:     #1c2a40;   /* chips, fondos de relleno */
  --bg-glow:     #0b2a3c;   /* el resplandor mágico de arriba de la página */

  /* ---------- líneas ---------- */
  --line-soft:   #1a2434;   /* separadores dentro de un panel */
  --line:        #463714;   /* bordes de controles: oro apagado */
  --line-strong: #785a28;   /* borde en hover */

  /* ---------- marcos dorados (el borde de 2px del cliente) ----------
     Oscuro abajo, claro arriba: la luz viene de arriba. Se usan como
     fondo del borde: background: <relleno> padding-box, var(--marco) border-box */
  --marco:         linear-gradient(0deg, #785a28 0%, #c89b3c 55%, #c8aa6e 100%);
  --marco-claro:   linear-gradient(0deg, #c89b3c 0%, #f0e6d2 100%);
  --marco-apagado: linear-gradient(0deg, #32281e 0%, #463714 100%);
  --marco-gris:    linear-gradient(0deg, #3c3c41 0%, #5b5a56 100%);

  /* ---------- texto ---------- */
  --txt:         #f0e6d2;   /* principal (el blanco cálido del cliente) */
  --txt-2:       #a09b8c;   /* secundario */
  --muted:       #8a8577;   /* etiquetas, ayudas (5:1 sobre el fondo) */
  --muted-2:     #66645c;   /* lo que casi no importa: pie legal, vacíos */
  --white:       #fff;      /* el brillo de las copas, el pictograma de una carta */
  --title-fade:  #c8aa6e;   /* el pie del degradé del título de portada */

  /* ---------- acento: la magia (cian) ---------- */
  --accent:      #0ac8b9;
  --on-accent:   #010a13;   /* texto sobre cian */

  /* ---------- estados: SOLO comunican bien / mal / da igual ---------- */
  --good:        #2fbf7a;
  --good-dim:    #0f2e26;
  --bad:         #e84057;   /* el rojo de "derrota" */
  --bad-dim:     #321420;
  --warn:        #d9a441;   /* "da igual" del draft */

  /* ---------- color con significado propio ---------- */
  --gold:        #c8aa6e;   /* títulos y premios; también el OVR (el rango) */
  --blue:        #4fa3e8;   /* premios individuales, tier 2 */
  --purple:      #a87bff;   /* títulos internacionales */
  --role:        #c89b3c;   /* el chip del puesto (MID, ADC…) */
  --fav:         #e8506e;   /* el club del que sos hincha */

  /* tiers de liga */
  --tier-1:      var(--oro-2);
  --tier-2:      var(--blue);
  --tier-3:      var(--muted);

  /* ---------- metales de las copas (cada copa: claro arriba, oscuro abajo) ---------- */
  --metal-gold:        #f2d67a;
  --metal-gold-deep:   #a57c1e;
  --metal-gold-pale:   #f6e3a8;   /* el nombre del mundial en la copa en pantalla */
  --metal-silver:      #e4e7ee;
  --metal-silver-deep: #8d939e;
  --metal-bronze:      #d9a878;
  --metal-bronze-deep: #8a5a2f;
  --metal-award:       #ffd75e;
  --metal-award-deep:  #b8860b;

  /* ---------- el fondo de las cartas de decisión (claro, oscuro) ---------- */
  --art-green-1:   #1d5c4a;  --art-green-2:   #08221f;
  --art-blue-1:    #1b4c7a;  --art-blue-2:    #071a2e;
  --art-red-1:     #7a2234;  --art-red-2:     #260a14;
  --art-gold-1:    #7a5f22;  --art-gold-2:    #241b0a;
  --art-neutral-1: #1e2d44;  --art-neutral-2: #0a1428;

  /* ---------- la Grieta (selector de rol) ---------- */
  --rift-line:     #463714;
  --rift-pin-bg:   rgba(1,10,19,.88);

  /* ---------- escudos ---------- */
  --crest-plate:   rgba(240,230,210,.9);   /* chapa clara detrás de los logos negros */
  --crest-veil:    rgba(255,255,255,.15);  /* la banda / faja / cheurón del blasón */

  /* ---------- Ko-fi (su color de marca) ---------- */
  --kofi:          #ff5e5b;
  --kofi-txt:      #ff8e8c;
  --kofi-txt-hover:#ffb3b1;

  /* ---------- velos y sombras ---------- */
  --scrim:         rgba(1,10,19,.86);       /* detrás de un modal o cartel */
  --glass:         rgba(1,10,19,.92);       /* barra flotante (idioma) */
  --veil:          rgba(240,230,210,.035);  /* hover de una fila */
  --veil-faint:    rgba(240,230,210,.015);  /* fondo de un detalle desplegado */
  --glow-oro:      rgba(200,170,110,.5);    /* el halo de lo elegido */
  --glow-cian:     rgba(10,200,185,.55);    /* el halo de lo mágico */
  --shade:         rgba(0,0,0,.42);         /* sombra de objetos chicos */
  --shade-strong:  rgba(0,0,0,.6);          /* sombra de lo que flota */
  --shadow:        0 10px 34px rgba(0,0,0,.55);

  /* Transparencias de un color: color-mix(in srgb, var(--accent) 12%, transparent).
     Escalones: 5 · 12 · 22 · 35 · 45 · 60 (%). Ver docs/design-system.md. */

  /* ---------- tipografía ----------
     Dos letras: Spectral (la del cliente: títulos y botones, en mayúscula)
     e Inter (todo lo que se lee: textos, datos, números). */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  --display-estilo: italic;   /* los títulos grandes van en itálica, como en la web del juego */
  --mono: "SF Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* La escala. Nueve tamaños de texto y nada en el medio. */
  --fs-xs:   10px;   /* etiquetas en versalita (EDAD, PJ, RIVAL) */
  --fs-sm:   11px;   /* chips, badges, notas al pie */
  --fs-md:   12px;   /* filas densas: tablas, partidos, línea de tiempo */
  --fs-base: 13px;   /* descripciones, texto dentro de cartas */
  --fs-body: 15px;   /* el cuerpo del sitio, botones, campos */
  --fs-lg:   17px;   /* título de una carta o de un bloque */
  --fs-xl:   20px;   /* título de sección, número de una stat, nick */
  --fs-2xl:  26px;   /* título de pantalla, edad */
  --fs-3xl:  30px;   /* OVR, nombre en la pantalla final, la copa */
  --fs-display:    clamp(38px, 8vw, 68px);   /* el título de una pantalla de entrada */
  --fs-display-sm: clamp(28px, 6vw, 44px);   /* el mismo, con el teléfono acostado */
  --fs-hero:       clamp(46px, 11vw, 112px); /* el título de la portada */
  --fs-deco:   92px;  /* el monograma gigante de fondo de una tarjeta de club */
  --fs-input:  16px;  /* piso de los campos en táctil: con menos, iOS hace zoom */

  /* íconos hechos con caracteres (emoji, flechas, ✕) */
  --ico-sm: 16px;
  --ico-md: 26px;
  --ico-lg: 30px;

  --ls-tighter:   -.03em;  /* títulos grandes */
  --ls-tight:     -.02em;  /* títulos */
  --ls-wide:       .05em;  /* chips y botones chicos */
  --ls-boton:      .08em;  /* la letra de un botón (mayúscula de Spectral) */
  --ls-caps:       .1em;   /* etiquetas en mayúscula */
  --ls-caps-wide:  .15em;  /* etiquetas en mayúscula muy chicas */
  --ls-kicker:     .22em;  /* el sobretítulo de una pantalla */

  /* ---------- forma: el cliente es de ángulo recto ---------- */
  --r-xs:   1px;    /* botones, banderas */
  --r-sm:   2px;    /* chips, retratos chicos, filas de tabla */
  --r:      2px;    /* controles, cartas chicas, imágenes */
  --r-lg:   4px;    /* paneles y cartas grandes */
  --r-xl:   4px;    /* modales y la caja de identidad */
  --r-pill: 999px;  /* lo que es redondo de verdad: un pin del mapa, un punto */
  --r-circulo: 50%; /* las medallas */

  /* ---------- espacio ---------- */
  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --gap-5: 24px;
  --gap-6: 32px;
  --gap-7: 48px;    /* entre secciones de la portada */
  --gap-8: 80px;

  --maxw: 1400px;

  /* ---------- capas: de abajo hacia arriba ---------- */
  --z-barra:   50;   /* el selector de idioma */
  --z-aviso:   60;   /* la copa en pantalla y el toast */
  --z-cartel:  65;   /* el paso 2 de la identidad y el cartel de "Empezar carrera" */
  --z-modal:   70;   /* el panel de información */
  --z-cookies: 80;   /* el aviso de cookies, siempre arriba */

  /* ---------- movimiento ---------- */
  --dur-fast:   .14s;  /* hover, apretar, cambiar de color */
  --dur:        .22s;  /* aparecer un cartel, un toast */
  --dur-slow:   .34s;  /* entrar una pantalla, el pop de un resultado */
  --dur-slower: .5s;   /* celebraciones: la copa que sube */
  --dur-entrada: .7s;  /* lo que entra en la portada, de a uno */
  --dur-escalon: .09s; /* la demora entre uno y el siguiente (× su número, --i) */
  --dur-latido: 2.6s;  /* lo que respira: el brillo del botón de cola */
  --dur-giro:   4s;    /* la luz que da vueltas al marco */
  --dur-loop:   14s;   /* lo que gira de fondo para siempre */
  --ease-suave:  cubic-bezier(.2,.9,.3,1.1);   /* cajas que se abren */
  --ease-resorte: cubic-bezier(.2,.9,.3,1.3);  /* lo que celebra */
  --ease-pop:    cubic-bezier(.2,.9,.3,1.5);   /* el desenlace que sale */
  --ease-salida: cubic-bezier(.22,1,.36,1);    /* lo que entra y frena (sin rebote) */
  --ease-hex:    cubic-bezier(.06,.81,0,.98);  /* la del cliente: arranca rápido, se apaga lento */
}

/* 🔴 Piso de lectura en pantalla chica: lo de 10px pasa a 11, que es lo
   mínimo que recomiendan Apple y Google. Antes era una lista de 18
   componentes en responsive.css, y cada etiqueta nueva quedaba afuera
   hasta que alguien se acordaba de sumarla. Ahora es el token. */
@media (max-width: 900px) {
  :root { --fs-xs: 11px; }
}

/* 🔴 El vietnamita usa letras (ạ, ữ, ộ…) que la Inter del sitio no trae: trae
   ă, đ, ơ, ư, pero no las de U+1EA0 a U+1EF9. Con Inter adelante cada
   palabra saldria armada con dos fuentes. Va entero con la del sistema.
   El japones pide fuentes japonesas antes que la china que el navegador
   podria encontrar primero para los kanji. <html lang> lo pone
   LOL.aplicarMeta al cambiar de idioma. */
:root:lang(vi) { --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
:root:lang(ja) { --font: "Inter", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, system-ui, sans-serif; }

/* Spectral no trae letras chinas, japonesas ni coreanas: en los títulos lo
   latino ("CARRERA PRO", "LCK") sigue en Spectral y el resto cae en la del
   sistema. SIN itálica, que en esas letras el navegador la
   inventa torciendo el dibujo. El vietnamita sí: Spectral trae sus letras. */
:root:lang(zh), :root:lang(ja), :root:lang(ko) {
  --font-display: "Spectral", var(--font);
  --display-estilo: normal;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* el fondo del cliente: negro azulado, con la magia arriba y un dejo de
   oro abajo, como la luz de la pantalla de inicio */
body {
  min-height: 100vh;
  background:
    radial-gradient(1100px 640px at 50% -14%, var(--bg-glow) 0%, transparent 62%),
    radial-gradient(900px 520px at 50% 118%, var(--oro-6) 0%, transparent 70%),
    var(--bg);
}

::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--txt); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

button { font-family: inherit; color: inherit; cursor: pointer; }
input  { font-family: inherit; color: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--oro-5);
  border-radius: var(--r-sm);
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--oro-4); }

/* ---------- utilidades ----------
   Solo estas. Llevan !important a propósito: una utilidad existe para
   ganarle al componente (este archivo carga primero). Una nueva se agrega
   acá y en la galería; un margen "porque sí" en el JS, no. */
.u-muted  { color: var(--muted) !important; }
.u-center { text-align: center !important; }
.u-m-0    { margin: 0 !important; }
.u-mt-2   { margin-top: var(--gap-2) !important; }
.u-mt-3   { margin-top: var(--gap-3) !important; }
.u-mt-5   { margin-top: var(--gap-5) !important; }