/*
 * Agilro — identidad «noche de estreno» (ver docs/specs/05-marca.md).
 * Sala a oscuras, un foco cálido y la cartelera en letra de marquesina. Oscuro por defecto; versión clara para
 * quien la tenga en el sistema.
 */
@font-face {
    font-family: "Big Shoulders Display";
    src: url("/fonts/big-shoulders-display.woff2") format("woff2");
    font-weight: 700 900;
    font-display: swap;
}
@font-face {
    font-family: "Instrument Sans";
    src: url("/fonts/instrument-sans.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
}

:root {
    /* Sala */
    --night: #0c0e19;
    --night-2: #131728;
    --surface: #181d31;
    --surface-2: #20263f;
    --line: #2c3352;
    --ink: #f4f1ea;
    --muted: #a3a8c3;
    /* Foco (marca) y urgencia */
    --spot: #ffc83d;
    --spot-ink: #1a1405;
    --spot-glow: rgba(255, 200, 61, 0.22);
    /* El foco como color de texto: en oscuro es el mismo amarillo; en claro, ámbar oscuro para que se lea. */
    --spot-text: #ffc83d;
    --hot: #ff6a5c;
    --hot-soft: rgba(255, 106, 92, 0.16);
    --ok: #4fd6a0;
    --focus: #ffc83d;

    --font-display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif;
    --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --radius: 18px;
    color-scheme: dark;
}

/* Siempre de noche: Agilro es la sala a oscuras con el foco encendido, también con el sistema en modo claro
   (decidido el 2026-11-04). Los colores para fondo claro siguen en docs/specs/05-marca.md por si un día hacen falta. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--night);
    color: var(--ink);
    font: 16px/1.5 var(--font-body);
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

/* Logotipo: tique-flecha + nombre (templates/_brand/logo.html.twig). El nombre toma el color del texto. */
.logo { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; line-height: 0; }
.logo-svg { height: 40px; width: auto; display: block; overflow: visible; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}