/* O sistema visual do Minha Line.
   Esta é a única folha onde valor cru é permitido: as outras consomem os
   tokens. tests/estilo/sistema.test.js cobra isso. */

/* Outfit variável, auto-hospedada. Dois subconjuntos porque o Google Fonts
   entrega assim — e o básico (U+0000-00FF) é o que cobre o português.
   Baixar só o primeiro @font-face que ele devolve pega o latin-ext, que
   carrega sem erro e não desenha o "ã" de "João". */
@font-face {
  font-family: 'Outfit';
  src: url('/assets/fonts/outfit-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2122, U+2212;
}

@font-face {
  font-family: 'Outfit';
  src: url('/assets/fonts/outfit-latinext.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* A display carrega a personalidade; o corpo fica no sistema, que é
     rápido e já é o que a pessoa lê no resto do telefone. */
  --fonte-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-corpo: system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --papel tem gêmeo em assets/js/lib/colors.js (PAPEL): o tom da coluna
     é uma mistura em direção a ele. Mexeu aqui, mexe lá.

     Mais nove valores desta seção (incluindo --papel) têm um segundo gêmeo
     em assets/js/festival/export/canvas.js: o canvas não enxerga custom
     property, então ele guarda a própria cópia em hex. Mexeu na cor aqui,
     mexa lá também — tests/estilo/canvas-tokens.test.js compara os dois
     arquivos valor a valor e quebra se alguém esquecer. */
  /* Papel BRANCO, e a superfície branca junto: o item não se separa da
     página por tom nenhum — quem separa é o anel de --contorno, sozinho.
     Foi decisão de desenho depois de comparar as duas saídas: tingir o item
     obrigaria inkColorForStage a escurecer as tintas dos palcos, porque a
     do Global Village (Rock in Rio) só tem 4,57:1 de folga sobre branco e
     qualquer tingimento a derruba abaixo de AA. O anel não encosta nisso.

     Com os dois brancos a metáfora de elevação também volta a fechar: o
     item está na mesma luz da página, então a sombra pode dizer
     "levantado" sem contradizer o tom. */
  --papel: #ffffff;
  --superficie: #ffffff;
  --tinta: #1b1b1a;
  --tinta-suave: #6f6b62;
  --tinta-tenue: #8b8579;
  --linha: #e6e1d7;
  /* O anel dos itens, no roxo da marca diluído. Ele NÃO é decoração: com
     papel e superfície ambos brancos, é a única coisa que separa um item
     do outro e do fundo, então o piso dele é alto. */
  --contorno: #d3bff4;

  /* Violeta profundo, a 33° de matiz da cor de palco mais próxima — a maior
     distância entre as candidatas testadas. Mantém a linhagem roxa da marca
     antiga, então quem já conhece o site não sente ruptura. */
  --marca: #6d28d9;
  /* A marca a 10% sobre o papel, pré-calculada. Fundo de chip onde o roxo
     precisa aparecer sem pintar cheio — a marca sobre ela dá 5.69:1. */
  --marca-tenue: #ece3f1;

  /* Os dois estados pintam a lateral E um fundo tonalizado. O fundo é
     tênue de propósito: forte demais e ele cobre o tom da coluna, que é
     quem diz de qual palco o show é. O texto nunca acompanha — fica
     sempre em --tinta, que é o que impede o card de virar
     branco-sobre-branco como acontecia no desenho antigo. */
  --selecionado: #16a34a;
  --selecionado-fundo: #d6f5e3;
  --conflito: #dc2626;
  --conflito-fundo: #ffd7d7;
  --conflito-tinta: #b91c1c;

  --desabilitado: #d5d0ca;

  --raio-pilula: 999px;
  --raio-card: 9px;
  --raio-chip: 6px;

  /* Duas elevações. Definição vem de borda de 1px onde precisar. */
  /* A elevação de repouso é ANEL + sombra, não só sombra. Contra o papel a
     superfície fica em 1,18:1, e a 1px de sombra a 7% não dá conta sozinha
     de separar as duas — ainda menos na imagem exportada, lida a 36%.
     O anel entra aqui, e não em cada seletor, por dois motivos: toda
     superfície em repouso tem o mesmo problema contra o mesmo papel, e a
     trava de estilo exige que box-shadow seja exatamente uma das duas
     elevações. Anel via sombra, e não border, porque .lista-item e
     .show-block já usam border-left/right transparentes como mecanismo de
     estado — é assim que o conflito pinta as laterais. */
  --sombra-repouso: 0 0 0 1px var(--contorno), 0 1px 2px rgba(0, 0, 0, .07);
  --sombra-flutuante: 0 4px 16px rgba(0, 0, 0, .22);

  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;

  /* Altura renderizada de .barra-nav no celular: e2 de padding vertical dos
     dois lados (8+8), o link .voltar com e3 de padding vertical (7+7) sobre
     --t-rotulo (12px, que em caixa de linha comum some para ~18px), mais o
     1px de border-bottom — soma ~49px. É o mesmo tipo de valor cru e frágil
     de --t-faixa-compacta: qualquer mudança no padding da barra, no padding
     do link ou na borda pede reconferir este número. Existe só para
     festival.css deslocar o `top` de .lista-marco pra baixo da barra — ver o
     comentário lá. Não usado para dar `height` à própria .barra-nav: a barra
     já renderiza nesse tamanho por conta do próprio conteúdo; fixar a altura
     dela não era necessário pro conserto e arriscava cortar o link se a
     medida estivesse errada. */
  --barra-nav-altura-celular: 49px;

  /* Escala de razão 1.25 a partir de 16px, arredondada. */
  --t-titulo: 62px;
  /* 56px empilhado empurraria a promessa para baixo do lockup em qualquer
     tela menor que a de um desktop largo, agora que os dois dividem a
     primeira linha da home (ver home.css). 40px é o degrau que sobra
     espaço pra frase ficar ao lado sem essa quebra. */
  --t-wordmark: 40px;
  /* O título dentro da faixa. Menor que --t-titulo porque divide a linha
     com o logo e o botão — a 62px a faixa fica mais alta que a grade que
     ela anuncia. 39px é o degrau da mesma razão 1.25. */
  --t-faixa: 39px;
  /* Variante de --t-faixa para @media (max-width: 767px) em festival.css.
     Sem ela, --t-faixa (pensado pra uma faixa de largura livre) quebra o
     título em três linhas no celular e quase dobra a altura da faixa — o
     motivo inteiro desta reforma era tirar o cabeçalho da primeira tela no
     celular, então isso não é opcional. 22px, com os demais ajustes do
     bloco (logo e gaps menores), mantém "JOÃO ROCK 2026" e
     "ROCK IN RIO 2026" numa linha só a 390px de viewport — ver a
     aritmética em .superpowers/sdd/2026-08-13-topo-da-pagina/task-3-report.md. */
  --t-faixa-compacta: 22px;
  --t-secao: 19px;
  --t-palco: 17px;
  --t-corpo: 15px;
  --t-corpo-menor: 14px;
  --t-atracao: 13px;
  --t-rotulo: 12px;
  --t-rotulo-menor: 11px;
  --t-nota: 10px;
}