/* Moldura partilhada do ta2f.
 *
 * Os tokens de cor, a base tipografica e os dois botoes do cabecalho viviam
 * copiados dentro de cada pagina, porque o site nao tem passo de build. A
 * terceira copia ja tinha divergido: o /music usava a classe .lang-toggle sem
 * levar a regra (o "EN" ficava espremido num circulo de 30px) e arrastava tres
 * regras .design-prism para um elemento que la nao existe.
 *
 * O que NAO vem para aqui, e de proposito: os arranques inline de tema e de
 * lingua, que tem de correr antes da pintura e por isso ficam em cada pagina;
 * e o cabecalho e o rodape em HTML, que sem build so se partilhariam por
 * injeccao em JS — e isso dava salto de layout. Para esses, a defesa e teste.
 */

:root{
    color-scheme:dark;
    --bg:#000; --fg:#ededed; --fg-strong:#fff; --muted:#8f8f8f;
    --line:#1a1a1a; --line-strong:#333;
    --hue-0:#e0483c; --hue-1:#e09a3a; --hue-2:#d8c845; --hue-3:#7fbf4d;
    --hue-4:#3fa9d6; --hue-5:#7b6ad6; --hue-6:#d65fa8;
  }
/* O claro nao e o escuro invertido: os tons de marca sao escurecidos para
     manterem contraste sobre fundo claro, senao a headline fica ilegivel. */
  :root[data-theme="light"]{
    color-scheme:light;
    --bg:#f4f4f2; --fg:#171717; --fg-strong:#000; --muted:#5f5f5f;
    --line:#e0e0dc; --line-strong:#c4c4be;
    --hue-0:#b62d22; --hue-1:#96631a; --hue-2:#736213; --hue-3:#40761f;
    --hue-4:#1a6a91; --hue-5:#4f3fa8; --hue-6:#9c2f6d;
  }
.theme-toggle{appearance:none;background:none;border:1px solid var(--line-strong);border-radius:50%;
    width:30px;height:30px;padding:0;display:grid;place-items:center;color:var(--fg);cursor:pointer;
    transition:border-color .2s ease,color .2s ease}
.theme-toggle:hover{border-color:var(--fg);color:var(--fg-strong)}
.theme-toggle svg{display:block}
.theme-toggle .half{transition:transform .3s ease}
:root[data-theme="light"] .theme-toggle .half{transform:rotate(180deg);transform-origin:center}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:'Geist',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--fg);text-decoration:none}
a:hover{color:var(--fg-strong)}
:focus-visible{outline:1px solid var(--fg);outline-offset:6px}
::selection{background:var(--fg);color:var(--bg)}
.social:hover{color:var(--fg)!important}
/* Mesma pilula do theme-toggle, mas com texto (PT/EN) em vez de icone —
     largura automatica em vez do circulo fixo de 30px. */
  .lang-toggle{width:auto;padding:0 10px;border-radius:14px;
    font:700 11px 'Geist Mono',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,sans-serif;
    letter-spacing:.04em}