/* Tokens da Cinemateca Boreal.
 *
 * Duplicados de propósito a partir de `extension/library/library.css`, no
 * repositório da extensão. Não há build partilhado entre os dois lados, e
 * copiar quarenta linhas é menos mau do que montar um pipeline para as
 * partilhar. Se mudares um valor aqui, muda-o lá também — a página do
 * espelho e a página da Biblioteca têm de ser indistinguíveis.
 */

@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/fraunces-400.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/fraunces-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/ibm-plex-mono-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/ibm-plex-mono-500.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/manrope-400.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/manrope-400.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/manrope-400.woff2') format('woff2');}

:root{
  /* Sem isto, o browser pinta a sua própria interface (scrollbars, campos,
   * selecção) em claro por cima de uma página escura — ver ruling C5. */
  color-scheme: dark;

  --breu: #070b12;
  --breu-2: #0c121d;
  --breu-3: #111a28;
  --violeta: #9b7ee8;
  --verde: #4fd8a8;
  --azul: #5ec8e8;
  --cobre: #e8935a;
  --gelo: #eaf2f7;

  --text-1: rgba(234,242,247,0.95);
  --text-2: rgba(234,242,247,0.68);
  --text-3: rgba(234,242,247,0.42);

  --glass-fill: linear-gradient(160deg, rgba(234,242,247,0.09), rgba(234,242,247,0.02));
  --glass-fill-strong: linear-gradient(160deg, rgba(234,242,247,0.13), rgba(234,242,247,0.035));
  --glass-border: rgba(234,242,247,0.14);
  --glass-border-hover: rgba(234,242,247,0.28);

  --shadow-soft: 0 20px 55px rgba(2,4,8,0.5);
  --shadow-lift: 0 30px 70px rgba(2,4,8,0.6);

  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  --aurora-shift: 0deg;
  --ease-glass: cubic-bezier(.2,.8,.2,1);
  --hue: 214; /* fallback for cards/covers before JS sets a per-video hue */

  /* Escala tipográfica do site público — SEM equivalente na extensão (lá a
   * escala vive dispersa pelos componentes). Quatro passos e só eles:
   * display (h1), título (h2/h3), corpo (p, botões), etiqueta (mono).
   * A landing é uma página de leitura; ter os passos como tokens impede
   * que a próxima secção invente um quinto tamanho. */
  --texto-display: clamp(2.5rem, 1.9rem + 3vw, 3.75rem);
  --texto-titulo: clamp(1.45rem, 1.3rem + 0.8vw, 1.8rem);
  --texto-corpo: 1rem;
  --texto-etiqueta: 0.85rem;
}

.language-nav{display:flex;justify-content:flex-end;gap:.8rem;max-width:46rem;margin:1rem auto 0;padding:0 1.5rem;font: .8rem 'IBM Plex Mono',monospace}
.language-nav a{color:var(--text-2);text-decoration:none}
.language-nav a:hover,.language-nav a:focus-visible{color:var(--text-1)}

/* Rodapé da casca (base.html renderiza sempre <footer class="rodape">),
 * partilhado pelas três páginas públicas para que nenhuma o mostre com o
 * tipo de letra e a cor de link por omissão do browser.
 *
 * A landing e o espelho herdam esta regra directamente. A política de
 * privacidade define uma variante local, byte a byte igual, no seu próprio
 * <style> inline — o que torna esta regra redundante nessa página em
 * particular, mas não a apagues por causa disso: esse <style> é doutro
 * agente. Na página do espelho, espelho.css esconde este bloco da casca
 * (ela já tem o seu próprio rodapé, com os mesmos links fundidos lá
 * dentro — dois <footer> seriam dois landmarks `contentinfo`).
 */
.rodape {
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
  display: flex;
  gap: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.rodape a {
  color: var(--text-3);
}