/* Tokens del concurso.
 *
 * Implementacion de DESIGN.md ("Pa'lais - Dia de Muertos Edition"). La idea
 * central del sistema es una sola: el negro de humo es el lienzo, el naranja
 * cempasuchil es la UNICA voz estructural, y todo lo demas son acentos.
 *
 * La regla que hace que el sitio no se vuelva un carnaval: el cempasuchil
 * (#e85d04) es el unico color que rellena botones, enlaces y titulares. El rosa
 * mexicano y el morado luto decoran; nunca compiten por ser la accion. Si
 * aparece un segundo color de accion, el sistema se rompio.
 *
 * Los nombres de las variables usan los de DESIGN.md con prefijo `--c-` (color),
 * `--s-` (superficie), `--f-` (fuente) y `--t-` (texto). Los alias de la parte
 * de abajo son los nombres cortos que usa el CSS de componentes; existen para
 * que las vistas no tengan que saber de donde sale cada color.
 */

:root {
  /* ======================================================================
   * COLOR — la paleta de DESIGN.md, sin modificar
   * ==================================================================== */

  /* Negro de humo: fondo principal. No es negro puro: el calor evita que la
   * pagina se lea como una pantalla apagada. */
  --c-negro-humo: #1a1a1a;
  /* Cempasuchil: el color estructural. Encabezados, enlaces, botones rellenos. */
  --c-cempasuchil: #e85d04;
  /* Ambar: el brillo de la vela. Hovers y detalles. */
  --c-ambar: #ff9e00;
  /* Rosa mexicano: votacion y acentos festivos. */
  --c-rosa-mexicano: #e5007d;
  /* Morado luto: secciones de alta carga emocional (CTA final). */
  --c-morado-luto: #5a0181;
  /* Amarillo cera: el destello. Velas y acentos tipograficos, con medida. */
  --c-amarillo-cera: #ffd60a;
  /* Blanco calavera: texto sobre oscuro y superficie de tarjeta. Nunca #fff. */
  --c-blanco-calavera: #fff5e6;
  /* Crema papel: fondo de tarjeta infantil y de lectura relajada. */
  --c-crema-papel: #fbf9f6;
  /* Verde jade: botanico, ancla la paleta en lo terrenal. */
  --c-verde-jade: #2d6a4f;
  /* Turquesa: el unico frio saturado. Acento puntual, jamas base. */
  --c-turquesa: #00b4d8;
  /* Rosa chicle: la seccion infantil necesita una paleta mas suave. */
  --c-rosa-chicle: #ff85a1;

  /* ======================================================================
   * SUPERFICIES — cuatro niveles, y la separacion viene de ahi
   *
   * No hay sombras en el sistema base: dos superficies contiguas se separan
   * por contraste de color y por un borde de 1px. La unica sombra admitida es
   * la calida de hover (--sombra-hover), y nunca es gris.
   * ==================================================================== */

  --s-noche: #1a1a1a;        /* base: body, secciones literarias, cabecera, pie */
  --s-noche-alta: #26201f;   /* tarjeta oscura: un paso por encima de la base */
  --s-noche-media: #332b29;  /* campos elevados, cajas de codigo */
  --s-hueso: #fff5e6;        /* tarjeta clara, superficie elevada */
  --s-hueso-tenue: #fbf9f6; /* crema papel: campos, infantil */
  --s-hueso-hondo: #d2b68c; /* borde de input, separador tenue */

  /* Tinta sobre superficies claras (formularios, dentro de tarjetas). */
  --c-tinta: #1a1a1a;
  /* Tinta secundaria para texto de apoyo (ayudas, contadores, metadatos).
   * Antes era #6b5c72, un gris violaceo que sobrevivia del tema morado
   * anterior: el canal azul era mas alto que el rojo, y sobre una crema
   * papir calido se leia como morado. #675a50 es el mismo tono pero del
   * rango papel, y de paso sube el contraste de 5.88:1 a 6.33:1. */
  --c-tinta-media: #675a50;

  /* Tinta sobre superficies oscuras. */
  --c-niebla: #fff5e6;
  --c-niebla-tenue: #b9a9b0;

  /* Cempasuchil derivado: los tres tonos que necesitan los estados. */
  --c-cempasuchil-alto: #ff9e00;
  --c-cempasuchil-osc: #a34100;
  --c-cempasuchil-claro: #fde8c4;

  /* Estados. Son lo unico que puede usar color que no sea decorativo, y solo
   * para comunicar exito, error o aviso: nunca para decorar. */
  --c-exito: #2d6a4f;
  --c-exito-claro: #dbeadd;
  --c-alerta: #b3402f;
  --c-alerta-claro: #f7ddd8;
  --c-aviso: #8a6d1f;
  --c-aviso-claro: #fbeecb;

  /* Papel picado: decoracion pura, jamas informacion. */
  --c-papel-1: #e5007d;
  --c-papel-2: #e85d04;
  --c-papel-3: #ff9e00;
  --c-papel-4: #5a0181;
  --c-papel-5: #ff85a1;

  /* ======================================================================
   * TIPOGRAFIA — cuatro voces
   *
   * La firma del sistema es la dualidad display/serif: titulares condensados en
   * mayusculas contra los versos de una calaverita en serif. La script solo
   * aparece en taglines y firmas; meterla en la UI chrome es el error tipografico
   * tipico de este estilo.
   * ==================================================================== */

  /* Display condensada: titulares de 32px para arriba, jamas texto corrido. */
  --f-display: "Bebas Neue", "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
  /* Serif literaria: las calaveritas escritas y las citas. */
  --f-serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  /* Sans de UI: cuerpo, navegacion, botones, formularios. */
  --f-texto: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Script: taglines y firmas de calaverita. */
  --f-mano: "Caveat", "Segoe Script", cursive;

  /* Escala tipografica. Los tamanos son fijos y los containers los ajusta con
   * clamp(); asi un titular de 56px no se convierte en 30px en un movil ni en
   * 90px en una pantalla grande. */
  --t-caption: 0.75rem;      --t-caption-lh: 1.5;      --t-caption-tr: 1.8px;
  --t-body-sm: 0.875rem;     --t-body-sm-lh: 1.6;      --t-body-sm-tr: 1.1px;
  --t-body: 1rem;            --t-body-lh: 1.5;         --t-body-tr: 0.8px;
  --t-serif-body: 1rem;      --t-serif-body-lh: 1.6;   --t-serif-body-tr: normal;
  --t-serif-verse: 1.25rem;  --t-serif-verse-lh: 1.4;  --t-serif-verse-tr: normal;
  --t-subheading: 1.5rem;    --t-subheading-lh: 1.0;   --t-subheading-tr: 6.4px;
  --t-heading-sm: 2rem;      --t-heading-sm-lh: 0.95;  --t-heading-sm-tr: 1.4px;
  --t-heading: 2.875rem;     --t-heading-lh: 1.0;      --t-heading-tr: 1.9px;
  --t-heading-lg: 3.5rem;    --t-heading-lg-lh: 0.95;  --t-heading-lg-tr: 1.8px;
  --t-display: 4.5rem;       --t-display-lh: 0.9;      --t-display-tr: 2px;
  --t-script: 2rem;          --t-script-lh: 1.2;       --t-script-tr: normal;

  /* ======================================================================
   * ESPACIADO — base 4px, densidad compacta
   * ==================================================================== */

  --e-1: 0.25rem; --e-2: 0.5rem;  --e-3: 0.75rem; --e-4: 1rem;
  --e-5: 1.5rem;  --e-6: 2rem;    --e-7: 3rem;    --e-8: 4rem;
  --e-9: 6rem;    --e-10: 8rem;

  /* ======================================================================
   * FORMAS — un radio por familia de componente, nunca mezclados
   * ==================================================================== */

  --r-chico: 8px;    /* inputs y elementos pequenos */
  --r-medio: 12px;   /* tarjetas */
  --r-grande: 16px;  /* tarjetas de imagen, dialogos */
  --r-pill: 32px;    /* botones: la forma de pastilla de DESIGN.md */
  --r-badge: 16px;   /* badges de votos */

  /* ======================================================================
   * SOMBRAS — calidas y con direccion, nunca grises
   * ==================================================================== */

  --s-1: 0 1px 2px rgb(0 0 0 / 0.3);
  --s-2: 0 2px 8px rgb(0 0 0 / 0.35);
  --s-3: 0 8px 28px rgb(0 0 0 / 0.4);
  /* La unica sombra del sistema: la de hover de una tarjeta de calaverita. */
  --sombra-hover: 0 12px 24px rgb(232 93 4 / 0.15);
  --sombra-modal: 0 24px 48px rgb(0 0 0 / 0.5);

  /* ======================================================================
   * MOVIMIENTO — 200ms, y `reduce` se respeta
   * ==================================================================== */

  --mov-rapido: 120ms cubic-bezier(0.2, 0, 0.2, 1);
  --mov-medio:  200ms cubic-bezier(0.2, 0, 0.2, 1);
  --mov-entrada: 320ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ======================================================================
   * LAYOUT
   * ==================================================================== */

  --ancho-max: 1200px;
  --ancho-texto: 68ch;
  --section-gap: 4rem;   /* 64px, el ritmo entre secciones de DESIGN.md */
  --card-padding: 1.5rem;/* 24px */
  --element-gap: 0.5rem; /* 8px */
}

/* ========================================================================
 * ALIAS
 *
 * El CSS de componentes y las vistas usan estos nombres cortos. Se apuntan a
 * los tokens de arriba, asi que cambiar la paleta se hace en un solo lugar.
 * ==================================================================== */

:root {
  --noche:        var(--s-noche);
  --noche-alta:   var(--s-noche-alta);
  --noche-media:  var(--s-noche-media);
  --hueso:        var(--s-hueso);
  --hueso-tenue:  var(--s-hueso-tenue);
  --hueso-hondo:  var(--s-hueso-hondo);

  --tinta:        var(--c-tinta);
  --tinta-media:  var(--c-tinta-media);
  --niebla:       var(--c-niebla);
  --niebla-tenue: var(--c-niebla-tenue);

  --cempasuchil:       var(--c-cempasuchil);
  --cempasuchil-alto:  var(--c-cempasuchil-alto);
  --cempasuchil-osc:   var(--c-cempasuchil-osc);
  --cempasuchil-claro: var(--c-cempasuchil-claro);

  --exito: var(--c-exito);       --exito-claro: var(--c-exito-claro);
  --alerta: var(--c-alerta);     --alerta-claro: var(--c-alerta-claro);
  --aviso: var(--c-aviso);       --aviso-claro: var(--c-aviso-claro);

  --papel-1: var(--c-papel-1);
  --papel-2: var(--c-papel-2);
  --papel-3: var(--c-papel-3);
  --papel-4: var(--c-papel-4);
  --papel-5: var(--c-papel-5);

  --display: var(--f-display);
  --serif:   var(--f-serif);
  --texto:   var(--f-texto);
  --mano:    var(--f-mano);
}

/* Sin movimiento, no hay movimiento. Se define en el :root de arriba para que
 * cualquier transicion que use estas variables se detenga sola. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mov-rapido: 1ms; --mov-medio: 1ms; --mov-entrada: 1ms;
  }
}