/* =====================================================================
   FILM FEST MONITOR — TOKENS (colores, sombras, curvas, medidas)
   ÚNICA fuente de verdad del aspecto de la web. La cargan TODAS las páginas
   (portada, fichas, aviso legal, 404) antes que su propia hoja de estilos.

   Reglas:
   - Un color nuevo se define AQUÍ (en claro y en oscuro) y en el resto se usa var(--…).
   - Ninguna otra hoja vuelve a declarar estos nombres en :root.
   - Los tonos intermedios se sacan con color-mix(in srgb, var(--brand) 12%, var(--bg)),
     así funcionan solos en modo oscuro.
   ===================================================================== */
:root {
  /* Superficies y texto */
  --bg: #ffffff;
  --soft: #f4f4f6;
  --soft-2: #eaeaee;
  --ink: #0b0b0d;
  --ink-2: #3a3a40;
  --muted: #6e6e76;
  --line: #e7e7eb;

  /* Marca: el verde del logo es el hilo conductor (lava de píxeles, acentos, «comprobado») */
  --brand: #18b45c;
  --live: #18b45c;
  --brand-soft: color-mix(in srgb, var(--brand) 14%, transparent);
  --brand-ink: color-mix(in srgb, var(--brand) 66%, var(--ink));   /* verde para TEXTO pequeño: 5,3:1 sobre blanco (WCAG AA) */
  --brand-titulo: color-mix(in srgb, var(--brand) 85%, var(--ink)); /* verde para titulares grandes: 3,6:1 (AA texto grande) */
  --brand-relleno: color-mix(in srgb, var(--brand) 70%, var(--ink)); /* verde de FONDO con texto o icono blanco encima: 4,9:1 */

  /* Estados de una convocatoria: abierta · abre pronto · cerrada */
  --open: #0d8240;          /* 4,9:1 con texto blanco encima (antes #12a150, 3,4:1) */
  --open-ink: #ffffff;
  --open-tint: #e7f6ee;
  --soon: #ffc21a;
  --soon-ink: #2a2000;
  --soon-tint: #fff6db;
  --soon-strong: #9a6a00;    /* ámbar legible sobre blanco: 4,7:1 (antes #e8a200, 2,2:1) */
  --closed: #d42c26;        /* 5:1 con texto blanco encima (antes #e3342f, 4,4:1) */
  --closed-ink: #ffffff;
  --closed-tint: #fdeceb;

  --soon-hondo: #ff8a00;     /* naranja para el degradado de «abre pronto» */
  --closed-claro: #ff8a85;   /* rojo claro: «Quitar filtros» al pasar el ratón en modo oscuro */

  /* Texto e iconos SOBRE un color de relleno (verde, rojo, foto oscura): siempre blanco, en claro y en oscuro */
  --sobre-color: #ffffff;
  /* Para oscurecer o aclarar un color con color-mix(in srgb, var(--x) 80%, var(--mix-oscuro)) */
  --mix-oscuro: #000000;
  --mix-claro: #ffffff;

  /* Ventanas emergentes: superficie propia y velo que separa del fondo */
  --popup-fondo: #ffffff;
  --popup-borde: transparent;
  --popup-velo: rgba(10, 10, 16, .55);

  /* Profundidad, movimiento y medidas */
  --shadow: 0 12px 40px rgba(10, 10, 20, .12), 0 2px 6px rgba(10, 10, 20, .06);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --header: 58px;
  --font: Archivo, system-ui, sans-serif;

  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0c0c0e;
  --soft: #17171a;
  --soft-2: #232327;
  --ink: #f2f2f4;
  --ink-2: #cfcfd5;
  --muted: #9b9ba4;
  --line: #27272c;
  --brand-soft: color-mix(in srgb, var(--brand) 20%, transparent);
  --brand-ink: color-mix(in srgb, var(--brand) 80%, var(--ink));
  --brand-titulo: var(--brand);
  --brand-relleno: color-mix(in srgb, var(--brand) 72%, #000);
  --open: #22c06c;
  --open-ink: #03150a;
  --open-tint: #0f251a;
  --soon-tint: #2a2208;
  --soon-strong: #ffc21a;
  --closed: #f0524d;
  --closed-ink: #1c0303;
  --closed-tint: #2a1110;
  --shadow: 0 12px 40px rgba(0, 0, 0, .5);
  --popup-fondo: #1b1b1f;            /* algo más clara que la página: la ventana «flota» */
  --popup-borde: rgba(255, 255, 255, .07);
  --popup-velo: rgba(0, 0, 0, .72);
  color-scheme: dark;
}