/* La marca de Partita Studio: la identidad 6, Suite (WC-33). La arma marca/kit/armar_tokens.py desde los
   tokens: no se edita a mano. Las variables --marca-* son las que usa la web (sitio/css/partita.css). */

@font-face { font-family: 'League Spartan'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fuentes/league-spartan.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('/fuentes/figtree.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: italic; font-weight: 300 900; font-display: swap; src: url('/fuentes/figtree-italica.woff2') format('woff2'); }

:root {
  /* Los colores, con su nombre */
  --partita-grafito: #1C1C1C; /* Grafito: el fondo de la casa y la tinta */
  --partita-grafito-2: #272727; /* Grafito 2: la superficie sobre grafito */
  --partita-grafito-3: #363636; /* Grafito 3: los bordes y las pistas sobre grafito */
  --partita-blanco: #FFFFFF; /* Blanco: el papel */
  --partita-niebla: #F2F1EE; /* Niebla: el fondo claro */
  --partita-niebla-2: #E6E4DF; /* Niebla 2: la superficie sobre claro */
  --partita-niebla-3: #D9D6CF; /* Niebla 3: los bordes y las pistas sobre claro */
  --partita-gris: #5A5A5A; /* Gris: el texto suave sobre claro */
  --partita-gris-claro: #B5B5B5; /* Gris claro: el texto suave sobre grafito */
  --partita-rojo: #DC1928; /* Rojo: pieza del signo */
  --partita-rojo-tinta: #C8151F; /* Rojo tinta: el acento sobre claro: botones, enlaces, el campo de la oferta */
  --partita-rojo-hondo: #9E1018; /* Rojo hondo: un panel adentro del campo rojo */
  --partita-rojo-hondo-2: #85101A; /* Rojo hondo 2: el hover del rojo hondo */
  --partita-rojo-tinta-2: #A8111A; /* Rojo tinta 2: el hover del acento */
  --partita-rosa: #FFE4E5; /* Rosa: el texto suave sobre el campo rojo */
  --partita-mostaza: #E0A912; /* Mostaza: pieza del signo y el acento sobre grafito */
  --partita-mostaza-2: #C99A0F; /* Mostaza 2: el hover de la mostaza */
  --partita-mostaza-palida: #FBEFC5; /* Mostaza pálida: el resaltado */
  --partita-pizarra: #4A6F84; /* Pizarra: pieza del signo */
  --partita-verde: #2F7A57; /* Verde: pieza del signo y el «listo» */
  --partita-error: #B3261E; /* Error: los errores de un formulario */

  /* Las cuatro piezas del signo, en orden: la P de arriba, la panza, la P de abajo y el punto */
  --partita-pieza-1: var(--partita-rojo);
  --partita-pieza-2: var(--partita-mostaza);
  --partita-pieza-3: var(--partita-pizarra);
  --partita-pieza-4: var(--partita-verde);

  /* La letra */
  --marca-letra: 'Figtree', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
  --marca-letra-titulos: 'League Spartan', Futura, 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
  --marca-peso-titulos: 700;
  --marca-interletra-titulos: -0.03em;
  --marca-letra-codigo: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* taste-skill-ignore: sólo para código literal */

  /* La escala */
  --marca-t-chico: 14px;
  --marca-t-texto: 18px;
  --marca-t-entrada: clamp(20px, 1.6vw, 24px);
  --marca-t-h3: clamp(24px, 2.4vw, 32px);
  --marca-t-h2: clamp(36px, 4.4vw, 64px);
  --marca-t-h1: clamp(44px, 7vw, 112px);

  /* El suelo, la tinta y el acento (modo claro, el de la web) */
  --marca-fondo: #F2F1EE;
  --marca-superficie: #E6E4DF;
  --marca-superficie-hover: #D9D6CF;
  --marca-papel: #FFFFFF;
  --marca-tinta: #1C1C1C;
  --marca-tinta-2: #272727;
  --marca-tinta-3: #363636;
  --marca-suave: #5A5A5A;
  --marca-sobre-tinta: #FFFFFF;
  --marca-sobre-tinta-suave: #B5B5B5;
  --marca-acento: #C8151F;
  --marca-acento-hover: #A8111A;
  --marca-acento-oscuro: #9E1018;
  --marca-acento-oscuro-hover: #85101A;
  --marca-sobre-acento: #FFFFFF;
  --marca-sobre-acento-suave: #FFE4E5;

  /* El código que se muestra (la ficha de la IA) */
  --marca-codigo-fondo: #1C1C1C;
  --marca-codigo-texto: #F2F1EE;
  --marca-codigo-clave: #E0A912;
  --marca-pista: #D9D6CF;

  /* Estados */
  --marca-ok: #2F7A57;
  --marca-error: #B3261E;
  --marca-resaltado: #FBEFC5;

  /* Esquinas: los botones redondos, como la pieza de la panza */
  --marca-radio-boton: 999px;
  --marca-radio: 16px;
  --marca-radio-tira: 20px;

  /* El logo (marca/logo.svg): su proporción, ancho sobre alto. La escribe armar_kit.py */
  --logo-proporcion: 13467 / 1792;
}

/* El modo oscuro: grafito de fondo y mostaza de acento. Se pide con la clase o el atributo, no solo. */
.oscuro, [data-tema="oscuro"] {
  --marca-fondo: #1C1C1C;
  --marca-superficie: #272727;
  --marca-superficie-hover: #363636;
  --marca-papel: #272727;
  --marca-tinta: #FFFFFF;
  --marca-tinta-2: #F2F1EE;
  --marca-tinta-3: #E6E4DF;
  --marca-suave: #B5B5B5;
  --marca-sobre-tinta: #1C1C1C;
  --marca-sobre-tinta-suave: #5A5A5A;
  --marca-acento: #E0A912;
  --marca-acento-hover: #C99A0F;
  --marca-sobre-acento: #1C1C1C;
  --marca-pista: #363636;
}