/* ═══════════════════════════════════════════════════════════════
   THE PLAYER — Design System
   Arquivo unico, sem @import.
   Gerado de tokens/*.css — nao edite aqui, edite a fonte e regenere.
   ═══════════════════════════════════════════════════════════════ */

/* ── fonts ─────────────────────────────────────── */
/* Três famílias, todas SIL OFL / Google Fonts.
   O logotipo é lettering exclusivo — não existe fonte equivalente.
   Substitutos de sistema declarados nas stacks de tokens/typography.css.
   Binários auto-hospedados em apps/world/public/brand/v2.1/fonts/ — sem requisição externa.
   JetBrains Mono existe apenas no peso 500, que é --tp-weight-mono; o peso 400 não é usado. */
@font-face {
  font-family: "Quantico";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/brand/v2.1/fonts/quantico-400.woff2") format("woff2");
}
@font-face {
  font-family: "Quantico";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/brand/v2.1/fonts/quantico-700.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/brand/v2.1/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/brand/v2.1/fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/brand/v2.1/fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/brand/v2.1/fonts/jetbrains-mono-500.woff2") format("woff2");
}

/* ── colors ─────────────────────────────────────── */
/* Valores extraídos do logotipo oficial. HEX exatos — nunca tom "parecido". */
:root {
  /* Cores principais */
  --tp-violeta-player: #9948F3;   /* cor da marca e da luz da arena */
  --tp-violeta-glow:   #C17AF8;   /* destaque, link, brilho */
  --tp-violeta-deep:   #6627C1;   /* fundo violeta, botão com texto branco */
  --tp-preto-arena:    #030009;   /* fundo padrão de tudo — nunca #000 puro */

  /* Neutros e apoio */
  --tp-grafite:        #14101C;   /* cards, superfícies, concreto tratado */
  --tp-borda:          #2A2338;   /* linhas, divisórias, contornos */
  --tp-cinza-nevoa:    #A79FB8;   /* texto secundário, legenda */
  --tp-branco-player:  #F7F5FF;   /* texto principal no escuro */
  --tp-branco-doc:     #FFFFFF;   /* documento, contrato, nota, proposta B2B */

  /* Acento e cores de sistema */
  --tp-ciano-ping:      #22E0E8;  /* dado e métrica no cockpit · máx. 5% da área */
  --tp-ambar-alerta:    #FFB020;  /* aviso, limite de gasto, prazo */
  --tp-verde-confirma:  #2ED47A;  /* check-in feito, pago, dentro do plano */
  --tp-vermelho-falha:  #FF4D5E;  /* erro, bloqueio de catálogo, ao vivo */

  /* Gradiente da marca — o que existe dentro das letras do logotipo.
     Só 180°. Nunca em texto de leitura, nunca na horizontal, nunca invertido. */
  --tp-gradiente-marca: linear-gradient(180deg, #C17AF8 0%, #9948F3 52%, #6627C1 100%);

  /* Transparências derivadas — usadas em vez de inventar HEX novo */
  --tp-violeta-08: rgba(153, 72, 243, 0.08);
  --tp-violeta-16: rgba(153, 72, 243, 0.16);
  --tp-violeta-32: rgba(153, 72, 243, 0.32);
  --tp-ciano-12:   rgba(34, 224, 232, 0.12);
  --tp-branco-04:  rgba(247, 245, 255, 0.04);
  --tp-branco-08:  rgba(247, 245, 255, 0.08);
  --tp-preto-72:   rgba(3, 0, 9, 0.72);
}

/* ── typography ─────────────────────────────────────── */
:root {
  /* Famílias */
  --tp-font-display: "Quantico", "Arial Black", Arial, sans-serif;  /* peso 700, caixa alta */
  --tp-font-label:   "Quantico", Arial, sans-serif;                 /* peso 400, caixa alta */
  --tp-font-text:    "Inter", "Segoe UI", Roboto, Helvetica, sans-serif;
  --tp-font-mono:    "JetBrains Mono", Consolas, Menlo, monospace;  /* peso 500 */

  /* Pesos */
  --tp-weight-display: 700;
  --tp-weight-label:   400;
  --tp-weight-text:    400;
  --tp-weight-text-md: 500;
  --tp-weight-text-sb: 600;
  --tp-weight-mono:    500;

  /* Escala tipográfica do manual (seção 10) */
  --tp-h1-size: 48px;   --tp-h1-lh: 50px;   --tp-h1-track: 0.055em;
  --tp-h2-size: 30px;   --tp-h2-lh: 34px;   --tp-h2-track: 0.06em;
  --tp-h3-size: 22px;   --tp-h3-lh: 26px;   --tp-h3-track: 0.06em;
  --tp-label-size: 13px; --tp-label-lh: 16px; --tp-label-track: 0.13em;
  --tp-body-size: 16px; --tp-body-lh: 26px;
  --tp-body-sm-size: 14px; --tp-body-sm-lh: 22px;
  --tp-caption-size: 13px; --tp-caption-lh: 20px;
  --tp-data-size: 13px; --tp-data-lh: 18px;
  --tp-data-lg-size: 34px; --tp-data-lh-lg: 38px;  /* número herói do cockpit */

  /* Tracking do letreiro — "THE" no logotipo */
  --tp-track-the: 0.38em;

  /* Medida máxima de linha: 75 caracteres */
  --tp-measure: 68ch;
}
/* Número é instrumento (#816, direção §3.1): algarismos tabulares em todo dado, para a
   coluna não dançar quando o valor muda. */
.tp-data, .tp-data-hero { font-variant-numeric: tabular-nums; }

/* ── spacing ─────────────────────────────────────── */
:root {
  --tp-space-1: 4px;
  --tp-space-2: 8px;
  --tp-space-3: 12px;
  --tp-space-4: 16px;
  --tp-space-5: 20px;
  --tp-space-6: 24px;
  --tp-space-8: 32px;
  --tp-space-10: 40px;
  --tp-space-12: 48px;
  --tp-space-16: 64px;
  --tp-space-20: 80px;

  /* Grid e composição (seção 11) */
  --tp-grid-columns: 12;
  --tp-grid-gutter: 24px;
  --tp-page-margin: 32px;
  --tp-page-margin-mobile: 20px;

  /* Respiro do logotipo — 1X = altura de caixa alta de "THE" */
  --tp-respiro: 1.5;        /* multiplicador mínimo de 1X, quatro lados */
  --tp-respiro-fachada: 2;  /* fachada, banner, capa de vídeo, marca d'água */
}

/* ── shape ─────────────────────────────────────── */
:root {
  /* Raio — token de interface do manual (seção 14): card raio 12 px */
  --tp-radius-sm: 6px;
  --tp-radius: 12px;
  --tp-radius-pill: 999px;

  /* Chanfro a 45° — o corte de terminal do logotipo virou formato de container.
     8–16 px em tela, 3–6 mm no impresso, sempre em cantos OPOSTOS. */
  --tp-chanfro-sm: 8px;
  --tp-chanfro: 12px;
  --tp-chanfro-lg: 16px;
  --tp-clip-chanfro: polygon(
    var(--tp-chanfro) 0, 100% 0, 100% calc(100% - var(--tp-chanfro)),
    calc(100% - var(--tp-chanfro)) 100%, 0 100%, 0 var(--tp-chanfro)
  );

  --tp-border-width: 1px;
  --tp-border-width-focus: 2px;
}

/* ── effects ─────────────────────────────────────── */
:root {
  /* Glow violeta — luz, não decoração. Um foco por peça.
     Nunca em texto de leitura nem em aviso de segurança. */
  --tp-glow-sm: 0 0 12px rgb(var(--tp-tema-brilho-rgb) / 0.35);
  --tp-glow:    0 0 24px rgb(var(--tp-tema-brilho-rgb) / 0.45), 0 0 64px rgb(var(--tp-tema-brilho-rgb) / 0.22);
  --tp-glow-lg: 0 0 40px rgb(var(--tp-tema-brilho-rgb) / 0.55), 0 0 120px rgb(var(--tp-tema-brilho-rgb) / 0.28);
  /* O glow do botão primário é fixo: o tema muda o brilho das superfícies, nunca o
     do botão (BDR-030, BDR-077 D7). Sem var() de tema de propósito. */
  --tp-glow-acao: 0 0 12px rgba(153, 72, 243, 0.35);
  --tp-glow-ciano: 0 0 18px rgba(34, 224, 232, 0.38);

  /* Sombra: o escuro não usa sombra preta, usa borda + luz.
     A única sombra dura é no documento claro (proposta, contrato). */
  --tp-shadow-doc: 0 1px 2px rgba(3, 0, 9, 0.12), 0 8px 24px rgba(3, 0, 9, 0.08);

  /* Profundidade por luz (#816, direção §2.2): fio claro de 1 px no topo de todo cartão e
     fio escuro no pé, por box-shadow inset sobre a borda inline que já existe; nunca sombra
     preta. Monocromáticos (o tema já tinge o --tp-border). Em RN: borderTopColor e
     borderBottomColor distintos. */
  --tp-fio-luz: rgba(247, 245, 255, 0.14);
  --tp-fio-luz-forte: rgba(247, 245, 255, 0.26);
  --tp-fio-sombra: rgba(3, 0, 9, 0.55);
  /* O LED interno do único herói da tela, em todo tema inclusive o neutro (RN: LinearGradient).
     No neutro a 0,28 (rodada 2, visual:tokens-e-temas-r2): a 0,16 quase não se via. A 3.3b mede o topo do
     herói (surface-2 + este LED): névoa 5,06, branco 11,87, destaque 4,52. Os temas ficam a 0,16
     no bloco [data-tp-theme]. */
  /* visual:tokens-e-temas-r3: o LED do herói lê o brilho do herói (--tp-heroi-brilho-rgb, no bloco Tema), que é o
     do tema salvo onde o tema cai no vermelho de falha. */
  --tp-led-cartao: linear-gradient(180deg, rgb(var(--tp-heroi-brilho-rgb) / 0.28) 0, rgb(var(--tp-heroi-brilho-rgb) / 0) 128px);
  /* Dois focos de teto na faixa de cima: o LED do tema neutro (direção D2, Forma B). A 3.3b
     compõe os dois stops cruzados (0,33) e mede o neutro com eles como caso próprio. */
  --tp-led-focos: radial-gradient(62% 100% at 20% 0, rgb(var(--tp-tema-brilho-rgb) / 0.22) 0, rgb(var(--tp-tema-brilho-rgb) / 0) 70%), radial-gradient(50% 90% at 86% 0, rgb(var(--tp-tema-brilho-rgb) / 0.14) 0, rgb(var(--tp-tema-brilho-rgb) / 0) 70%);
  /* A única sombra do escuro, só em tela sem primário (credencial, sessão), por filter:
     drop-shadow() num invólucro sem corte. Violeta fixo, como o --tp-glow-acao (rodada 2): o
     objeto de sucesso (passe, placa da confirmada, bilhete) nunca brilha na cor de falha de um
     tema; o tema fica no LED, na estampa e na mira. Sem var() de tema de propósito. */
  --tp-sombra-tonal: 0 14px 28px rgba(153, 72, 243, 0.28);
  /* O glow do OBJETO-FOCO (o QR do passe): o --tp-glow do neutro, fixo em todo tema. */
  --tp-glow-foco: 0 0 24px rgba(153, 72, 243, 0.45), 0 0 64px rgba(153, 72, 243, 0.22);
  /* A mira: quatro colchetes de canto no destaque do tema, um foco por tela (direção §3.3). */
  --tp-mira-cor: var(--tp-tema-destaque);
  --tp-mira: 1.5px;
  --tp-mira-tam: 12px;
  --tp-mira-folga: 6px;

  /* Vidro — folha sobre conteúdo, nunca superfície de card (BDR-028).
     Só existe onde algo rola por baixo: rodapé de ação, barra de abas, folha
     solta. Sobre fundo chapado não há o que desfocar — ali a superfície é
     --tp-surface. Os escopos pais e documento solidificam o vidro sozinhos. */
  --tp-blur-sm: 8px;
  --tp-blur: 16px;
  --tp-vidro: rgba(20, 16, 28, 0.66);
  --tp-vidro-borda: rgba(247, 245, 255, 0.12);
  --tp-vidro-filtro: blur(var(--tp-blur)) saturate(1.4);
  --tp-vidro-luz: linear-gradient(100deg, rgb(var(--tp-tema-brilho-rgb) / 0) 34%, rgb(var(--tp-tema-brilho-rgb) / 0.09) 50%, rgb(var(--tp-tema-brilho-rgb) / 0) 66%);
  /* O vidro como console (#816, direção §2.3): a aresta de refração sem filtro SVG, a luz
     fixa (o realce especular, parado) e a borda de rolagem antes dele, para o conteúdo
     sumir em vez de ser cortado. O shimmer em laço (--tp-vidro-luz) fica só no Skeleton,
     que é espera. RN: LinearGradient absoluto acima da barra. */
  --tp-vidro-aresta: inset 0 1px 0 rgba(247, 245, 255, 0.16), inset 0 0 0 1px rgb(var(--tp-tema-brilho-rgb) / 0.14);
  --tp-vidro-luz-fixa: linear-gradient(180deg, rgba(247, 245, 255, 0.07) 0, rgba(247, 245, 255, 0) 46%);
  --tp-borda-rolagem: linear-gradient(180deg, rgb(3 0 9 / 0), rgb(3 0 9 / 0.85));
  --tp-borda-rolagem-alt: 28px;
  /* O vidro líquido flutuante (rodada 2, visual:tokens-e-temas-r2): a camada que flutua recuada sobre o
     conteúdo (barra de abas, rodapé, menu). Mais translúcido e mais desfocado que o --tp-vidro,
     realce de cima mais forte e sombra de luz no brilho do tema (não preta). Os escopos pais e
     documento solidificam: fundo sólido, sem filtro, sem realce, sem sombra, sem recuo.
     RN: BlurView intensity alta + LinearGradient do realce + shadowColor do brilho. */
  /* Rodada 3 (visual:tokens-e-temas-r3): lia como bandeja fosca. Fundo bem mais translúcido; o filtro
     clareia o que passa por trás em vez de escurecer (brightness); fio claro de 1 px em toda a
     aresta (--tp-vidro-flutuante-aresta, e o -fio nas diagonais do chanfro); realce especular
     forte no topo, um fio fino de refração na base e o brilho de lente parado no terço de cima
     (--tp-vidro-lente, que entra como a primeira camada do especular: o ::after da placa já
     carrega a sombra). A alfa do fundo é a menor em que o rótulo das abas passa 4,5:1 com um
     título branco passando por baixo (medida no relatório da fatia). */
  --tp-blur-lg: 20px;
  --tp-vidro-flutuante: rgba(20, 16, 28, 0.54);
  --tp-vidro-flutuante-filtro: blur(var(--tp-blur-lg)) saturate(1.8) brightness(1.12);
  --tp-vidro-flutuante-aresta: inset 0 0 0 1px rgba(247, 245, 255, 0.30), inset 0 1px 0 rgba(247, 245, 255, 0.56);
  --tp-vidro-flutuante-fio: rgba(247, 245, 255, 0.30);
  --tp-vidro-lente: radial-gradient(64% 34% at 50% 0, rgba(247, 245, 255, 0.10) 0, rgba(247, 245, 255, 0) 100%);
  --tp-vidro-especular: var(--tp-vidro-lente), linear-gradient(180deg, rgba(247, 245, 255, 0.26) 0, rgba(247, 245, 255, 0.10) 20%, rgba(247, 245, 255, 0) 52%), linear-gradient(0deg, rgba(247, 245, 255, 0.14) 0, rgba(247, 245, 255, 0) 6px);
  --tp-vidro-sombra: 0 16px 40px rgb(var(--tp-tema-brilho-rgb) / 0.22), 0 2px 8px rgba(3, 0, 9, 0.45);
  --tp-flutua-recuo: 12px;

  /* Anel de foco de teclado — contorno 2 px #C17AF8, offset 2 px */
  --tp-focus-ring: 0 0 0 2px #030009, 0 0 0 4px #C17AF8;

  /* Movimento: rápido e seco, sem bounce */
  --tp-ease: cubic-bezier(0.2, 0, 0.2, 1);
  --tp-dur-fast: 120ms;
  --tp-dur: 180ms;
  --tp-dur-slow: 280ms;
  /* A mola contida (#816, direção §5, D3): só em posição, escala e largura; nunca em cor nem
     em opacidade, que são sempre secas. Fallback web de withSpring com damping 0,9:
     overshoot de cerca de 6 %. Sem chaves neste comentário: o parser de blocos de
     scripts/ds/lib/tokens.mjs as leria como fim de regra. */
  --tp-mola: cubic-bezier(0.27, 1.06, 0.18, 1);
  --tp-dur-mola: 350ms;
  --tp-dur-mola-lenta: 500ms;
  /* Cascata de entrada, até 3 itens; o deslocamento da entrada (era 6 px). */
  --tp-dur-cascata: 40ms;
  --tp-entra-deslocamento: 12px;
  /* Toque que responde: encolhe e ganha uma camada de 10 % na cor do conteúdo, não brightness. */
  --tp-escala-toque: 0.97;
  --tp-camada-toque: rgba(247, 245, 255, 0.10);
  --tp-camada-toque-acao: rgba(3, 0, 9, 0.10);
  /* O momento de conquista (rodada 3, visual:tokens-e-temas-r3): quando a tela de conquista acaba de
     entrar, a mira se fecha de --tp-chega-folga até a própria folga com a mola, o LED do herói
     acende por opacidade (seco) e a luz varre o objeto uma vez; depois, silêncio. Só com a classe
     u-chega posta quando a tela é nova; menos movimento e o escopo pais zeram. RN: withSpring na
     posição dos colchetes, withTiming na opacidade e na banda. */
  --tp-chega-folga: 48px;
  --tp-dur-chega: 420ms;
  --tp-dur-chega-led: 400ms;
  --tp-dur-varre: 640ms;
  --tp-varre-banda: linear-gradient(100deg, rgba(247, 245, 255, 0) 40%, rgba(247, 245, 255, 0.26) 50%, rgba(247, 245, 255, 0) 60%);

  /* LED rasante da arena, usado como faixa de luz em fundos */
  --tp-led-rasante: linear-gradient(180deg, rgb(var(--tp-tema-brilho-rgb) / 0.22) 0%, rgb(var(--tp-tema-brilho-rgb) / 0) 100%);
}

/* ── keyframes ─────────────────────────────────────── */
/* Animações do sistema. Rápidas e secas por padrão; a mola contida (--tp-mola) é curva
   do elemento que se move, nunca do keyframe (#816).
   Usadas por Spinner e Skeleton — e pela respiração da ação primária;
   qualquer animação nova entra aqui. */
@keyframes tp-spin { to { transform: rotate(360deg); } }
@keyframes tp-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes tp-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tp-slide-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes tp-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(153,72,243,.5); } 70% { box-shadow: 0 0 0 8px rgba(153,72,243,0); } 100% { box-shadow: 0 0 0 0 rgba(153,72,243,0); } }
/* Respiração da ação primária (BDR-028): a luz varia, o botão não se move.
   drop-shadow e não box-shadow porque o chanfro (clip-path) corta box-shadow. */
@keyframes tp-respira { from { filter: drop-shadow(0 0 12px rgba(153, 72, 243, 0.35)); } to { filter: drop-shadow(0 0 22px rgba(153, 72, 243, 0.5)); } }
/* #816 (direção §5): a entrada em duas animações (posição e opacidade separadas, para a
   opacidade nunca passar de 1), a folha e o menu que nascem, a pílula da aba que desliza por
   transform, a luz que varre uma vez o que o servidor confirmou, e a ficha que acende. */
@keyframes tp-entra-pos { from { transform: translateY(var(--tp-entra-deslocamento)); } to { transform: none; } }
@keyframes tp-nasce { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes tp-desliza { from { transform: translateX(calc(var(--i-de) * 100%)); } to { transform: translateX(calc(var(--i) * 100%)); } }
@keyframes tp-varre { from { background-position: 200% 0; } to { background-position: -100% 0; } }
@keyframes tp-acende { from { transform: scale(0.94); } to { transform: none; } }
/* A mira que se fecha sobre o herói na chegada da conquista (rodada 3, visual:tokens-e-temas-r3): só a
   posição dos colchetes, nunca a opacidade (a mola não toca cor nem opacidade). */
@keyframes tp-mira-fecha { from { inset: calc(-1 * var(--tp-chega-folga)); } to { inset: calc(-1 * var(--tp-mira-folga)); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── semantic ─────────────────────────────────────── */
/* Aliases semânticos — é isto que a interface usa. */
:root {
  /* Superfícies */
  --tp-bg: var(--tp-preto-arena);
  --tp-surface: var(--tp-grafite);
  --tp-surface-raised: var(--tp-branco-04);
  /* A escada de profundidade por tom (#816, direção §2.1): a superfície de um elemento
     é um degrau acima da que ele pisa. low = rebaixado (ficha em repouso, campo, fundo
     de lista); 2 = o único herói da tela; 3 = placa dentro de cartão (chip, selo, disco).
     Literais, porque a 3.3b lê hex; por tema, no bloco [data-tp-theme]. */
  --tp-surface-low: #0B0813;
  --tp-surface-2: #1C1726;
  --tp-surface-3: #241E30;
  /* O que se escolhe acende por fio violeta + fundo tingido + palavra; o cheio é só do
     primário (direção D1). */
  --tp-escolha-fundo: var(--tp-violeta-16);
  --tp-escolha-borda: var(--tp-violeta-player);
  /* O tom do tema não cai no que se toca nem onde significa erro (rodada 2, visual:tokens-e-temas-r2): a
     borda de campo, de ficha de escolha e o fio lateral da caixa informativa ficam na borda do
     neutro em todo tema (no Corrida, borda vermelha em campo lia como inválido). O cartão e o
     herói continuam tingidos pelo --tp-borda do tema. Literal: nenhum tema o redeclara. */
  --tp-borda-neutra: #2A2338;
  /* O segmento apagado da contagem: névoa a 28 %, sem tinta do tema, o mesmo degrau em todo
     tema; o aceso é o destaque do tema (--tp-mira-cor). */
  --tp-seg-apagado: rgba(167, 159, 184, 0.28);
  --tp-surface-violeta: var(--tp-violeta-deep);
  --tp-border: var(--tp-borda);
  --tp-border-strong: var(--tp-violeta-player);

  /* Texto */
  --tp-text: var(--tp-branco-player);
  --tp-text-secondary: var(--tp-cinza-nevoa);
  --tp-text-link: var(--tp-tema-destaque);            /* o tema troca; ver o bloco Tema */
  /* REGRA DE OURO, fixa (visual:tema-claro-r3): o tema claro redefine o --tp-preto-arena dentro do escopo
     dele (é o fundo claro), e a tinta sobre o violeta-player não pode ir junto. Todo texto sobre
     o violeta lê este token, em todo tema. */
  --tp-tinta-sobre-violeta: #030009;
  --tp-text-on-violeta: var(--tp-tinta-sobre-violeta);
  --tp-text-on-violeta-deep: var(--tp-branco-player);
  --tp-text-doc: var(--tp-preto-arena);

  /* Ação */
  --tp-action: var(--tp-violeta-player);
  --tp-action-text: var(--tp-tinta-sobre-violeta);
  --tp-action-hover: var(--tp-violeta-glow);
  --tp-action-secondary-border: var(--tp-violeta-player);
  --tp-action-secondary-text: var(--tp-tema-destaque);

  /* Dado */
  --tp-data: var(--tp-ciano-ping);

  /* Estados */
  --tp-ok: var(--tp-verde-confirma);
  --tp-warn: var(--tp-ambar-alerta);
  --tp-danger: var(--tp-vermelho-falha);
}

/* Escopo do Portal dos Pais: SÓ INTER, sem glow, sem gíria, contraste ≥ 7:1.
   Tipografia "gamer" em aviso de segurança reduz a credibilidade justamente onde
   ela é o produto — então display e rótulo usam Inter dentro deste escopo.
   Dado continua em JetBrains Mono. Aplique data-tp-scope="pais" no container. */
[data-tp-scope="pais"] {
  /* BDR-030: o primario e um so no app inteiro, inclusive aqui — violeta-player
     com texto #030009 (4,54:1), o par sancionado no piso AA e a unica excecao ao
     7:1 deste escopo. Glow e respiracao continuam zerados: o escopo segue sobrio;
     so a cor e a forma do botao unificam. variant="deep" segue existindo para
     texto branco que precisa de fundo violeta (regra de ouro). */
  --tp-action: var(--tp-violeta-player);
  --tp-action-text: var(--tp-tinta-sobre-violeta);
  --tp-action-hover: var(--tp-violeta-glow);
  --tp-font-display: var(--tp-font-text);
  --tp-font-label: var(--tp-font-text);
  --tp-label-track: 0.07em;
  --tp-h2-track: 0;
  --tp-glow: none;
  --tp-glow-sm: none;
  --tp-glow-lg: none;
  /* Sem tema (BDR-077 D7): aqui um adulto lê regra de segurança do filho, e nada
     compete com o texto. Os três tokens voltam ao neutro. */
  --tp-tema-destaque: var(--tp-violeta-glow);
  --tp-tema-brilho-rgb: 153 72 243;
  --tp-tema-fundo: none;
  /* Vidro solidifica: a folha vira superfície comum (BDR-028). Desfoque atrás
     de texto não garante 7:1 com fundo nenhum. */
  --tp-vidro: var(--tp-bg);
  --tp-vidro-borda: var(--tp-borda);
  --tp-blur: 0px;
  --tp-blur-sm: 0px;
  --tp-vidro-filtro: none;
  --tp-vidro-luz: none;
  /* #816: sem luz na borda, sem LED no herói, sem sombra tonal, sem aresta de vidro e sem
     mola: o escopo fica seco. */
  --tp-vidro-aresta: none;
  --tp-vidro-luz-fixa: none;
  --tp-fio-luz: none;
  --tp-fio-sombra: none;
  --tp-led-cartao: none;
  --tp-sombra-tonal: none;
  --tp-mola: var(--tp-ease);
  --tp-glow-foco: none;
  --tp-blur-lg: 0px;
  --tp-vidro-flutuante-aresta: none;
  --tp-vidro-flutuante-fio: var(--tp-vidro-borda);
  --tp-cartaz-estampa: none;
  --tp-varre-banda: none;
  --tp-vidro-flutuante: var(--tp-bg);
  --tp-vidro-flutuante-filtro: none;
  --tp-vidro-especular: none;
  --tp-vidro-sombra: none;
  --tp-flutua-recuo: 0px;
}

/* Escopo avatar: o unico lugar do sistema onde arte em pixel aparece.
   Ele existe por um motivo tecnico e nao estetico. Arte em pixel escalada com a
   interpolacao padrao do navegador vira borrao, e o borrao e pior quanto menor a
   peca -- que e exatamente o caso de um avatar de 48 px. `pixelated` mantem a
   aresta dura, que e o ponto do estilo.
   Nao redefine cor, tipografia nem espacamento: fora da arte, este escopo e o
   escopo padrao. */
[data-tp-scope="avatar"] img,
[data-tp-scope="avatar"] canvas {
  image-rendering: pixelated;
}

/* A peça em SVG traz shape-rendering no próprio arquivo; esta linha cobre a arte
   colada inline, que perde o atributo com facilidade. Ampliar só em múltiplo
   inteiro de 64, senão a aresta dura vira pixel torto. */
[data-tp-scope="avatar"] svg {
  shape-rendering: crispEdges;
}

/* Escopo documento claro: proposta B2B, contrato, nota fiscal. */
[data-tp-scope="documento"] {
  --tp-bg: var(--tp-branco-doc);
  --tp-surface: var(--tp-branco-doc);
  --tp-text: var(--tp-preto-arena);
  --tp-text-secondary: #4A4356;
  --tp-border: #D8D3E2;
  --tp-text-link: var(--tp-violeta-deep);
  /* Papel não tem vidro: a folha solidifica no branco do documento (BDR-028). */
  --tp-vidro: var(--tp-bg);
  --tp-vidro-borda: var(--tp-border);
  --tp-vidro-filtro: none;
  --tp-vidro-luz: none;
  --tp-vidro-aresta: none;
  --tp-vidro-luz-fixa: none;
  --tp-borda-neutra: var(--tp-border);
  --tp-glow-foco: none;
  --tp-vidro-flutuante-aresta: none;
  --tp-vidro-flutuante-fio: var(--tp-border);
  --tp-vidro-flutuante: var(--tp-bg);
  --tp-vidro-flutuante-filtro: none;
  --tp-vidro-especular: none;
  --tp-vidro-sombra: none;
  --tp-flutua-recuo: 0px;
}

/* Tema (BDR-077 D7): a pessoa escolhe entre sete, nomeados por gênero de jogo e
   nunca por marca. O tema fica EM VOLTA do que se toca, nunca no lugar (founder,
   terceira volta do #444: "o VER e a aba selecionada nunca deveriam mudar de cor;
   o tema deve ser atrativo e evidente, mas em volta, não substituindo"). Ele muda
   três coisas: a cor de destaque (ícone com palavra, amostra, ornamento; nunca
   link, seta, rótulo de acesso, aba nem seleção, que ficam no violeta da casa), a
   cor do brilho (glow de superfície, luz do vidro, faixa de luz, contorno e tom da
   superfície) e o fundo decorativo. O botão primário não muda (BDR-030): ele lê
   --tp-action e --tp-glow-acao, que nenhum tema toca. Nenhum par de texto com
   contraste medido muda: todo destaque abaixo passa de 7:1 sobre o preto-arena e
   sobre o grafite, com o fundo decorativo composto (fórmula WCAG; o valor está
   ao lado de cada destaque).
   O fundo é só imagem (sem posição nem tamanho), porque quem o consome é
   background-image; posição/tamanho no token invalidam a declaração inteira.
   Aplique data-tp-theme="<tema>" no container; sem atributo vale o neutro,
   THE PLAYER. O escopo pais não tem tema. A troca é de uma vez, sem varredura:
   nenhuma transição lê estes tokens.
   Um cuidado de CSS: variável derivada (`--tp-text-link: var(--tp-tema-destaque)`)
   resolve no elemento em que foi declarada, e a raiz já a resolveu com o neutro.
   Por isso o bloco [data-tp-theme] redeclara as derivadas no próprio container. */
:root {
  --tp-tema-destaque: var(--tp-violeta-glow);
  --tp-tema-brilho-rgb: 153 72 243;
  --tp-tema-fundo: none;
  /* A força do fundo decorativo (founder, terceira volta do #444: "ainda mais
     legal sem perder a marca"): multiplica a tinta de cada fundo. `suave` é a
     força da primeira volta. O neutro não tem LED. O teto é o da trava 3.3b: a
     névoa nunca abaixo de 4,5:1 sobre a faixa de luz cruzada com as listras. */
  --tp-tema-forca: 2.4;
  --tp-tema-led: none;
  /* A máscara da estampa (#816, direção §6): esmaece o motivo onde o tema pede (Corrida
     para a direita, Retrô no pé da faixa); `none` na raiz e em quem não a declara. Fica
     fora da conta da 3.3b de propósito: a trava mede o pior ponto. */
  --tp-tema-mascara: none;
  /* O herói fora da cor de falha (rodada 3, visual:tokens-e-temas-r3): o objeto de sucesso (placa da
     máquina, passe, cartão de membro, placa da arena) acende no brilho do herói, que é o do
     tema, salvo quando o brilho do tema cai a menos de 20 graus de matiz do --tp-vermelho-falha:
     aí aponta para o violeta da casa (hoje só o Corrida, a 4 graus). A estampa, a faixa de luz e
     a mira continuam no tema. Cada tema declara os dois no próprio bloco; a 3.3b mede o topo do
     herói com eles e cobra a distância de matiz. A borda do herói é a do tema com o brilho do
     herói (no neutro, a borda da casa). */
  --tp-heroi-brilho-rgb: 153 72 243;
  --tp-heroi-destaque: var(--tp-violeta-glow);
  --tp-heroi-borda: var(--tp-borda);
  /* O cartaz de evento gerado pelo sistema, sem foto: a estampa do tema a 2x, mascarada na
     diagonal. O neutro não tem estampa de faixa, então o cartaz leva a da casa, o corte do
     chanfro repetido a 45 graus. */
  --tp-cartaz-estampa-casa: repeating-linear-gradient(135deg, rgb(var(--tp-tema-brilho-rgb) / 0.08) 0 2px, transparent 2px 12px);
  --tp-cartaz-estampa: var(--tp-cartaz-estampa-casa);
  /* O véu (founder, quarta volta do #444: "caixas com fundo vazado e listas como
     o Perfil ficam péssimos"): o fundo decorativo e a faixa de luz ficam na faixa
     de cima da tela, e de 104 px para baixo o preto-arena é sólido. Texto de
     leitura, lista e caixa nunca ficam sobre a estampa. É a primeira camada. */
  --tp-tema-veu: linear-gradient(180deg, rgb(3 0 9 / 0) 0, rgb(3 0 9 / 0) 64px, #030009 104px);
}

[data-tp-theme="tatico"] {
  --tp-grafite: #1E1E1F;                              /* o grafite com 9% do brilho */
  --tp-surface-low: #110F14;
  --tp-surface-2: #252428;
  --tp-surface-3: #2C2A31;
  --tp-tema-destaque: #B9D66A;                         /* 12,79:1 no preto, 11,50:1 no grafite */
  --tp-tema-brilho-rgb: 127 168 58;
  --tp-heroi-brilho-rgb: var(--tp-tema-brilho-rgb);
  --tp-heroi-destaque: var(--tp-tema-destaque);
  /* Grade de coordenadas de 32 px e a mira (dois anéis) na faixa; a luz vem de um canto,
     como lanterna. */
  /* visual:tokens-e-temas-r2: identidade por forma e área. Grade de 24 px com fio de 3 px (era 32 e 1,5), a mira centrada perto
     do topo e maior (anéis de 3 px em r 34 e 58), a lanterna de canto cobrindo a faixa inteira. */
  --tp-tema-fundo: repeating-linear-gradient(0deg, rgb(var(--tp-tema-brilho-rgb) / calc(0.022 * var(--tp-tema-forca))) 0 3px, transparent 3px 24px), repeating-linear-gradient(90deg, rgb(var(--tp-tema-brilho-rgb) / calc(0.022 * var(--tp-tema-forca))) 0 3px, transparent 3px 24px), radial-gradient(circle at 50% 40px, transparent 34px, rgb(var(--tp-tema-brilho-rgb) / calc(0.02 * var(--tp-tema-forca))) 34px 37px, transparent 37px 58px, rgb(var(--tp-tema-brilho-rgb) / calc(0.02 * var(--tp-tema-forca))) 58px 61px, transparent 61px);
  --tp-tema-led: radial-gradient(300% 220% at 0 0, rgb(var(--tp-tema-brilho-rgb) / 0.22), rgb(var(--tp-tema-brilho-rgb) / 0) 100%);
}
[data-tp-theme="battle-royale"] {
  --tp-grafite: #291A1C;                              /* o grafite com 9% do brilho */
  --tp-surface-low: #160D13;
  --tp-surface-2: #302025;
  --tp-surface-3: #38262E;
  --tp-tema-destaque: #FFB35C;                         /* 11,76:1 no preto, 10,58:1 no grafite */
  --tp-tema-brilho-rgb: 255 122 26;
  --tp-heroi-brilho-rgb: var(--tp-tema-brilho-rgb);
  --tp-heroi-destaque: var(--tp-tema-destaque);
  /* A zona que fecha: um anel só (o tema está no teto da 3.3b), interno nítido e exterior
     difuso, com o centro à direita, onde não há texto; a luz vem do canto do anel. */
  --tp-tema-fundo: radial-gradient(circle at 78% 40px, transparent 0 59px, rgb(var(--tp-tema-brilho-rgb) / calc(0.07 * var(--tp-tema-forca))) 60px 62px, transparent 90px);
  --tp-tema-led: radial-gradient(90% 110% at 78% 0, rgb(var(--tp-tema-brilho-rgb) / 0.22), rgb(var(--tp-tema-brilho-rgb) / 0) 60%);
}
[data-tp-theme="construcao"] {
  --tp-grafite: #21171D;                              /* o grafite com 9% do brilho */
  --tp-surface-low: #120C13;
  --tp-surface-2: #291E26;
  --tp-surface-3: #302430;
  --tp-tema-destaque: #DEA66C;                         /* 9,70:1 no preto, 8,72:1 no grafite */
  --tp-tema-brilho-rgb: 168 98 43;
  --tp-heroi-brilho-rgb: var(--tp-tema-brilho-rgb);
  --tp-heroi-destaque: var(--tp-tema-destaque);
  /* Bloco isométrico: losangos de 24 px a 30° e 150° mais a aresta vertical do cubo; a luz é
     o rasante uniforme, de serra. */
  --tp-tema-fundo: repeating-linear-gradient(30deg, rgb(var(--tp-tema-brilho-rgb) / calc(0.045 * var(--tp-tema-forca))) 0 1.5px, transparent 1.5px 24px), repeating-linear-gradient(150deg, rgb(var(--tp-tema-brilho-rgb) / calc(0.045 * var(--tp-tema-forca))) 0 1.5px, transparent 1.5px 24px), repeating-linear-gradient(90deg, rgb(var(--tp-tema-brilho-rgb) / calc(0.03 * var(--tp-tema-forca))) 0 1px, transparent 1px 24px);
  --tp-tema-led: var(--tp-led-rasante);
}
[data-tp-theme="futebol"] {
  --tp-grafite: #141E22;                              /* o grafite com 9% do brilho */
  --tp-surface-low: #0C0F16;
  --tp-surface-2: #1C242B;
  --tp-surface-3: #232A34;
  --tp-tema-destaque: #5FE09A;                         /* 12,52:1 no preto, 11,26:1 no grafite */
  --tp-tema-brilho-rgb: 23 168 90;
  --tp-heroi-brilho-rgb: var(--tp-tema-brilho-rgb);
  --tp-heroi-destaque: var(--tp-tema-destaque);
  /* Gramado em faixas de 56 px, a linha de campo e o meio-círculo; a luz vem de dois
     refletores nos cantos de cima (a soma é a alfa do rasante de hoje). */
  /* visual:tokens-e-temas-r2: o gramado em nove faixas verticais de dois tons (a do meio escura, para a linha
     de meio-campo aparecer nela), o círculo central cortado pelo véu (lê meio-círculo) e dois
     refletores em feixe (conic) dos cantos de cima, que se cruzam no meio. */
  --tp-tema-fundo: repeating-linear-gradient(90deg, transparent 0 11.111%, rgb(var(--tp-tema-brilho-rgb) / calc(0.05 * var(--tp-tema-forca))) 11.111% 22.222%), linear-gradient(90deg, transparent calc(50% - 1.5px), rgb(var(--tp-tema-brilho-rgb) / calc(0.02 * var(--tp-tema-forca))) calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px)), radial-gradient(circle at 50% 60px, transparent 44px, rgb(var(--tp-tema-brilho-rgb) / calc(0.026 * var(--tp-tema-forca))) 44px 47px, transparent 47px);
  --tp-tema-led: conic-gradient(from 104deg at 3% 0, rgb(var(--tp-tema-brilho-rgb) / 0) 0deg, rgb(var(--tp-tema-brilho-rgb) / 0.12) 16deg, rgb(var(--tp-tema-brilho-rgb) / 0) 32deg), conic-gradient(from 224deg at 97% 0, rgb(var(--tp-tema-brilho-rgb) / 0) 0deg, rgb(var(--tp-tema-brilho-rgb) / 0.11) 16deg, rgb(var(--tp-tema-brilho-rgb) / 0) 32deg);
}
[data-tp-theme="corrida"] {
  --tp-grafite: #27121E;                              /* o grafite com 9% do brilho */
  --tp-surface-low: #150914;
  --tp-surface-2: #2E1927;
  --tp-surface-3: #361F30;
  --tp-tema-destaque: #FF7A7A;                         /* 8,25:1 no preto, 7,42:1 no grafite */
  --tp-tema-brilho-rgb: 232 40 45;
  /* O brilho do Corrida fica a 4 graus de matiz do vermelho de falha: o herói acende no
     violeta da casa (a estampa, a faixa e a mira seguem no vermelho do tema). */
  --tp-heroi-brilho-rgb: 153 72 243;
  --tp-heroi-destaque: var(--tp-violeta-glow);
  /* O xadrez, mais os riscos de velocidade a 20°; a máscara esmaece tudo para a direita e a
     luz vem rasante da esquerda. */
  --tp-tema-fundo: repeating-linear-gradient(45deg, rgb(var(--tp-tema-brilho-rgb) / calc(0.05 * var(--tp-tema-forca))) 0 8px, transparent 8px 32px), repeating-linear-gradient(-45deg, rgb(var(--tp-tema-brilho-rgb) / calc(0.05 * var(--tp-tema-forca))) 0 8px, transparent 8px 32px), repeating-linear-gradient(20deg, rgb(var(--tp-tema-brilho-rgb) / calc(0.03 * var(--tp-tema-forca))) 0 2px, transparent 2px 30px);
  --tp-tema-led: radial-gradient(80% 280px at 0 0, rgb(var(--tp-tema-brilho-rgb) / 0.22), rgb(var(--tp-tema-brilho-rgb) / 0) 72%);
  --tp-tema-mascara: linear-gradient(90deg, #000 34%, rgba(0, 0, 0, 0.45) 64%, transparent 94%);
}
[data-tp-theme="retro"] {
  --tp-grafite: #291229;                              /* o grafite com 9% do brilho */
  --tp-surface-low: #160919;
  --tp-surface-2: #301932;
  --tp-surface-3: #381F3C;
  --tp-tema-destaque: #FF7ADB;                         /* 8,99:1 no preto, 8,08:1 no grafite */
  --tp-tema-brilho-rgb: 255 43 176;
  --tp-heroi-brilho-rgb: var(--tp-tema-brilho-rgb);
  --tp-heroi-destaque: var(--tp-tema-destaque);
  /* As scanlines, mais a borda de pixel (degrau 8/8) esmaecida no pé pela máscara; a luz
     magenta é o rasante de hoje, e não pisca. */
  --tp-tema-fundo: repeating-linear-gradient(180deg, rgb(var(--tp-tema-brilho-rgb) / calc(0.06 * var(--tp-tema-forca))) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgb(var(--tp-tema-brilho-rgb) / calc(0.03 * var(--tp-tema-forca))) 0 8px, transparent 8px 16px);
  --tp-tema-led: var(--tp-led-rasante);
  --tp-tema-mascara: linear-gradient(180deg, #000 70%, transparent 100%);
}
/* As derivadas, no container do tema (ver o cuidado de CSS acima). */
[data-tp-theme] {
  /* A faixa de luz do tema no alto da tela (#816, direção §6) é de cada tema, no bloco dele
     acima: lanterna de canto, anel, refletores, rasante. Fica fora daqui porque o bloco do
     tema e este têm a mesma especificidade, e o que vem depois ganharia. */
  /* visual:temas */
  /* O contorno e a superfície tomam o tom do tema (a superfície é literal por
     tema, acima): é o que faz o tema ser visto de longe sem tocar no texto, no
     botão nem no preto. Quem mede é a trava 3.3b
     (scripts/ds/check-theme-contrast.mjs): branco acima de 7:1 e névoa acima de
     4,5:1 no pior fundo e na superfície de todo tema. */
  --tp-borda: rgb(var(--tp-tema-brilho-rgb) / 0.38);
  --tp-border: var(--tp-borda);
  --tp-surface: var(--tp-grafite);
  /* A barra de abas e a folha de vidro tomam o tom do tema, com a borda no brilho. */
  --tp-vidro: rgb(var(--tp-tema-brilho-rgb) / 0.12);
  --tp-vidro-borda: rgb(var(--tp-tema-brilho-rgb) / 0.4);
  /* --tp-text-link e --tp-action-secondary-text NÃO entram aqui: link, seta,
     rótulo de acesso e aba são o violeta da casa em todo tema. */
  --tp-glow-sm: 0 0 12px rgb(var(--tp-tema-brilho-rgb) / 0.35);
  --tp-glow:    0 0 24px rgb(var(--tp-tema-brilho-rgb) / 0.45), 0 0 64px rgb(var(--tp-tema-brilho-rgb) / 0.22);
  --tp-glow-lg: 0 0 40px rgb(var(--tp-tema-brilho-rgb) / 0.55), 0 0 120px rgb(var(--tp-tema-brilho-rgb) / 0.28);
  --tp-vidro-luz: linear-gradient(100deg, rgb(var(--tp-tema-brilho-rgb) / 0) 34%, rgb(var(--tp-tema-brilho-rgb) / 0.09) 50%, rgb(var(--tp-tema-brilho-rgb) / 0) 66%);
  --tp-led-rasante: linear-gradient(180deg, rgb(var(--tp-tema-brilho-rgb) / 0.22) 0%, rgb(var(--tp-tema-brilho-rgb) / 0) 100%);
  /* #816: a luz do herói, os focos do neutro, a sombra tonal, a mira e a aresta do vidro
     também leem o brilho, e também resolvem onde foram declaradas. */
  --tp-led-cartao: linear-gradient(180deg, rgb(var(--tp-heroi-brilho-rgb) / 0.16) 0, rgb(var(--tp-heroi-brilho-rgb) / 0) 128px);
  /* visual:tokens-e-temas-r3: a borda do herói e a estampa do cartaz, resolvidas no container. */
  --tp-heroi-borda: rgb(var(--tp-heroi-brilho-rgb) / 0.38);
  --tp-cartaz-estampa: var(--tp-tema-fundo);
  --tp-led-focos: radial-gradient(62% 100% at 20% 0, rgb(var(--tp-tema-brilho-rgb) / 0.22) 0, rgb(var(--tp-tema-brilho-rgb) / 0) 70%), radial-gradient(50% 90% at 86% 0, rgb(var(--tp-tema-brilho-rgb) / 0.14) 0, rgb(var(--tp-tema-brilho-rgb) / 0) 70%);
  /* visual:tokens-e-temas-r2: a sombra tonal é violeta fixo na raiz (objeto de sucesso nunca na cor de falha);
     a sombra do vidro flutuante lê o brilho do tema. */
  --tp-vidro-sombra: 0 16px 40px rgb(var(--tp-tema-brilho-rgb) / 0.22), 0 2px 8px rgba(3, 0, 9, 0.45);
  --tp-mira-cor: var(--tp-tema-destaque);
  --tp-vidro-aresta: inset 0 1px 0 rgba(247, 245, 255, 0.16), inset 0 0 0 1px rgb(var(--tp-tema-brilho-rgb) / 0.14);
}
[data-tp-tema-forca="suave"],
[data-tp-theme][data-tp-tema-forca="suave"] {
  --tp-tema-forca: 1;
  --tp-tema-led: none;
  --tp-tema-veu: none;
  --tp-vidro: rgba(20, 16, 28, 0.66);
  --tp-vidro-borda: rgba(247, 245, 255, 0.12);
  --tp-borda: #2A2338;
  --tp-border: var(--tp-borda);
  --tp-grafite: #14101C;
  --tp-surface-low: #0B0813;
  --tp-surface-2: #1C1726;
  --tp-surface-3: #241E30;
  --tp-surface: var(--tp-grafite);
  --tp-heroi-borda: var(--tp-borda);
}
/* O escopo pais não tem tema, esteja dentro de um container com tema ou no
   mesmo nó que ele: aqui um adulto lê regra de segurança do filho. */
[data-tp-theme] [data-tp-scope="pais"],
[data-tp-scope="pais"][data-tp-theme] {
  --tp-tema-destaque: var(--tp-violeta-glow);
  --tp-tema-brilho-rgb: 153 72 243;
  --tp-tema-fundo: none;
  --tp-tema-led: none;
  --tp-tema-veu: none;
  --tp-borda: #2A2338;
  --tp-border: var(--tp-borda);
  --tp-grafite: #14101C;
  --tp-surface-low: #0B0813;
  --tp-surface-2: #1C1726;
  --tp-surface-3: #241E30;
  --tp-surface: var(--tp-grafite);
  --tp-text-link: var(--tp-violeta-glow);
  --tp-action-secondary-text: var(--tp-violeta-glow);
  --tp-glow: none;
  --tp-glow-sm: none;
  --tp-glow-lg: none;
  --tp-vidro-luz: none;
  --tp-vidro-sombra: none;
  --tp-led-rasante: linear-gradient(180deg, rgb(var(--tp-tema-brilho-rgb) / 0.22) 0%, rgb(var(--tp-tema-brilho-rgb) / 0) 100%);
  --tp-heroi-brilho-rgb: 153 72 243;
  --tp-heroi-destaque: var(--tp-violeta-glow);
  --tp-heroi-borda: #2A2338;
  --tp-cartaz-estampa: none;
}

/* O tema claro (visual:tema-claro-r3; BDR-077, status de 2026-10-06: "entra um tema claro"), ao lado do
   padrão escuro THE PLAYER e dos seis de jogo. As telas escrevem cor por primitivo
   (--tp-branco-player é a tinta do texto; --tp-preto-arena e --tp-grafite, o fundo), então o claro
   redefine os primitivos de superfície e tinta DENTRO do escopo: o nome e o papel ficam, o valor
   vira. Não toca o que se toca: --tp-violeta-player, --tp-action, --tp-glow-acao e a tinta sobre o
   violeta (--tp-tinta-sobre-violeta, #030009) são os do app inteiro (BDR-030). O texto colorido
   ganha a variante escura que passa 4,5:1 em toda superfície clara (o violeta-glow do link não
   passa: aqui ele é o violeta escuro). No claro a luz não brilha: o glow vira sombra suave, e só o
   primário mantém a luz violeta. O vidro é branco translúcido com desfoque e fio escuro sutil. O
   tema fica em harmonia com o violeta: brilho da casa, sem estampa, luz de teto lavanda.
   Os escopos pais e documento não vestem o claro, nem no mesmo nó (:not abaixo) nem dentro dele
   (a volta aos primitivos da casa, no bloco seguinte). A 3.3b mede este bloco: tinta >= 7:1, névoa
   >= 4,5:1, link, destaque e cor de estado >= 4,5:1 em toda superfície; o par do primário intacto. */
[data-tp-theme="claro"]:not([data-tp-scope="pais"]):not([data-tp-scope="documento"]) {
  /* A escada do §2.1, no claro: a superfície que sobe clareia; a placa dentro do cartão escurece
     um degrau para se ver. */
  --tp-preto-arena: #F4F2F9;
  --tp-surface-low: #EBE8F2;
  --tp-grafite: #FDFCFF;
  --tp-surface-2: #FFFFFF;
  --tp-surface-3: #E6E2EF;
  --tp-branco-player: #15101F;
  --tp-cinza-nevoa: #585068;
  --tp-borda: #D6D0E1;
  --tp-borda-neutra: #D6D0E1;
  --tp-branco-04: rgba(21, 16, 31, 0.04);
  --tp-branco-08: rgba(21, 16, 31, 0.08);
  --tp-preto-72: rgba(21, 16, 31, 0.32);
  --tp-seg-apagado: rgba(88, 80, 104, 0.24);
  /* Texto colorido em fundo claro: a variante que passa 4,5:1 em toda superfície. */
  --tp-violeta-glow: #6627C1;
  --tp-ciano-ping: #006D75;
  --tp-verde-confirma: #0F7340;
  --tp-ambar-alerta: #875400;
  --tp-vermelho-falha: #B8152E;
  /* O tema em harmonia com o violeta. */
  --tp-tema-destaque: #6627C1;
  --tp-tema-brilho-rgb: 153 72 243;
  --tp-heroi-brilho-rgb: 153 72 243;
  --tp-heroi-destaque: #6627C1;
  --tp-tema-fundo: none;
  --tp-tema-mascara: none;
  --tp-tema-veu: none;
  --tp-tema-led: radial-gradient(120% 100% at 50% 0, rgb(var(--tp-tema-brilho-rgb) / 0.10), rgb(var(--tp-tema-brilho-rgb) / 0) 70%);
  /* As derivadas, no próprio container (o cuidado de CSS do bloco Tema). */
  --tp-bg: var(--tp-preto-arena);
  --tp-surface: var(--tp-grafite);
  --tp-surface-raised: var(--tp-branco-04);
  --tp-border: var(--tp-borda);
  --tp-text: var(--tp-branco-player);
  --tp-text-secondary: var(--tp-cinza-nevoa);
  --tp-text-link: var(--tp-violeta-glow);
  --tp-action-secondary-text: var(--tp-violeta-glow);
  --tp-data: var(--tp-ciano-ping);
  --tp-ok: var(--tp-verde-confirma);
  --tp-warn: var(--tp-ambar-alerta);
  --tp-danger: var(--tp-vermelho-falha);
  --tp-mira-cor: var(--tp-tema-destaque);
  --tp-heroi-borda: rgb(var(--tp-heroi-brilho-rgb) / 0.30);
  --tp-cartaz-estampa: var(--tp-cartaz-estampa-casa);
  --tp-focus-ring: 0 0 0 2px #F4F2F9, 0 0 0 4px #6627C1;
  /* Luz na borda: o fio de cima é branco, o de baixo é tinta a 10 %. */
  --tp-fio-luz: rgba(255, 255, 255, 0.72);
  --tp-fio-luz-forte: rgba(255, 255, 255, 0.96);
  --tp-fio-sombra: rgba(21, 16, 31, 0.10);
  /* A luz não brilha: glow vira sombra suave. O --tp-glow-acao do primário fica. */
  --tp-glow-sm: 0 1px 4px rgba(21, 16, 31, 0.08);
  --tp-glow: 0 4px 16px rgba(21, 16, 31, 0.10), 0 1px 3px rgba(21, 16, 31, 0.06);
  --tp-glow-lg: 0 12px 32px rgba(21, 16, 31, 0.12), 0 2px 6px rgba(21, 16, 31, 0.06);
  --tp-glow-foco: 0 8px 24px rgba(153, 72, 243, 0.20);
  --tp-glow-ciano: none;
  --tp-sombra-tonal: 0 14px 28px rgba(153, 72, 243, 0.18);
  --tp-led-cartao: linear-gradient(180deg, rgb(var(--tp-heroi-brilho-rgb) / 0.12) 0, rgb(var(--tp-heroi-brilho-rgb) / 0) 128px);
  --tp-camada-toque: rgba(21, 16, 31, 0.08);
  --tp-varre-banda: linear-gradient(100deg, rgba(153, 72, 243, 0) 40%, rgba(153, 72, 243, 0.24) 50%, rgba(153, 72, 243, 0) 60%);
  /* O vidro: branco translúcido com desfoque, aresta branca em cima e fio escuro sutil. */
  --tp-vidro: rgba(255, 255, 255, 0.76);
  --tp-vidro-borda: rgba(21, 16, 31, 0.10);
  --tp-vidro-filtro: blur(var(--tp-blur)) saturate(1.6);
  --tp-vidro-aresta: inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 0 0 1px rgba(21, 16, 31, 0.08);
  --tp-vidro-luz-fixa: linear-gradient(180deg, rgba(255, 255, 255, 0.50) 0, rgba(255, 255, 255, 0) 46%);
  --tp-borda-rolagem: linear-gradient(180deg, rgb(244 242 249 / 0), rgb(244 242 249 / 0.85));
  --tp-vidro-flutuante: rgba(255, 255, 255, 0.58);
  --tp-vidro-flutuante-filtro: blur(var(--tp-blur-lg)) saturate(1.8);
  --tp-vidro-flutuante-aresta: inset 0 0 0 1px rgba(21, 16, 31, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.96);
  --tp-vidro-flutuante-fio: rgba(21, 16, 31, 0.12);
  --tp-vidro-lente: radial-gradient(64% 34% at 50% 0, rgba(255, 255, 255, 0.50) 0, rgba(255, 255, 255, 0) 100%);
  --tp-vidro-especular: var(--tp-vidro-lente), linear-gradient(180deg, rgba(255, 255, 255, 0.60) 0, rgba(255, 255, 255, 0.16) 16%, rgba(255, 255, 255, 0) 40%), linear-gradient(0deg, rgba(21, 16, 31, 0.06) 0, rgba(21, 16, 31, 0) 2px);
  --tp-vidro-sombra: 0 16px 40px rgba(21, 16, 31, 0.12), 0 2px 8px rgba(21, 16, 31, 0.08);
}
/* Dentro do claro, quem não tem tema volta aos primitivos da casa: o escopo pais (um adulto lê
   regra de segurança do adolescente, BDR-077 D7), o documento (já é claro, e escreve a tinta por
   --tp-preto-arena) e um tema escuro dentro dele (a amostra da tela do tema). */
[data-tp-theme="claro"] :is([data-tp-scope="pais"], [data-tp-scope="documento"], [data-tp-theme]:not([data-tp-theme="claro"])) {
  --tp-preto-arena: #030009;
  --tp-branco-player: #F7F5FF;
  --tp-cinza-nevoa: #A79FB8;
  --tp-violeta-glow: #C17AF8;
  --tp-ciano-ping: #22E0E8;
  --tp-verde-confirma: #2ED47A;
  --tp-ambar-alerta: #FFB020;
  --tp-vermelho-falha: #FF4D5E;
  --tp-branco-04: rgba(247, 245, 255, 0.04);
  --tp-branco-08: rgba(247, 245, 255, 0.08);
  --tp-preto-72: rgba(3, 0, 9, 0.72);
}
/* O pais dentro do claro: as derivadas que os blocos do pais não redeclaram também voltam. */
[data-tp-theme="claro"] [data-tp-scope="pais"] {
  --tp-bg: var(--tp-preto-arena);
  --tp-surface-raised: var(--tp-branco-04);
  --tp-text: var(--tp-branco-player);
  --tp-text-secondary: var(--tp-cinza-nevoa);
  --tp-data: var(--tp-ciano-ping);
  --tp-ok: var(--tp-verde-confirma);
  --tp-warn: var(--tp-ambar-alerta);
  --tp-danger: var(--tp-vermelho-falha);
  --tp-borda-neutra: #2A2338;
  --tp-seg-apagado: rgba(167, 159, 184, 0.28);
  --tp-mira-cor: var(--tp-tema-destaque);
  --tp-focus-ring: 0 0 0 2px #030009, 0 0 0 4px #C17AF8;
  --tp-fio-luz-forte: rgba(247, 245, 255, 0.26);
  --tp-camada-toque: rgba(247, 245, 255, 0.10);
  --tp-borda-rolagem: linear-gradient(180deg, rgb(3 0 9 / 0), rgb(3 0 9 / 0.85));
}
/* No claro, --tp-branco-player é a tinta escura; sobre o violeta profundo o texto continua branco
   (BDR-030, --tp-text-on-violeta-deep, que a raiz já resolveu no branco). */
[data-tp-theme="claro"] :is(.tp-btn--deep, .tp-badge--violeta, .tp-btn--primary:active),
[data-tp-theme="claro"] ::selection {
  color: var(--tp-text-on-violeta-deep);
}

/* ── base ─────────────────────────────────────── */
/* Resets mínimos. */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--tp-bg);
  color: var(--tp-text);
  font-family: var(--tp-font-text);
  font-size: var(--tp-body-size);
  line-height: var(--tp-body-lh);
  font-weight: var(--tp-weight-text);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
a { color: var(--tp-text-link); text-decoration: none; }
a:hover { color: var(--tp-branco-player); text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: none; box-shadow: var(--tp-focus-ring); }
* { box-sizing: border-box; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--tp-violeta-deep); color: var(--tp-branco-player); }

/* ── classes utilitarias ───────────────────────────── */
.tp-h1 { font-family: var(--tp-font-display); font-weight: 700; font-size: var(--tp-h1-size); line-height: var(--tp-h1-lh); letter-spacing: var(--tp-h1-track); text-transform: uppercase; margin: 0; }
.tp-h2 { font-family: var(--tp-font-display); font-weight: 700; font-size: var(--tp-h2-size); line-height: var(--tp-h2-lh); letter-spacing: var(--tp-h2-track); text-transform: uppercase; margin: 0; }
.tp-label { font-family: var(--tp-font-label); font-weight: 400; font-size: var(--tp-label-size); line-height: var(--tp-label-lh); letter-spacing: var(--tp-label-track); text-transform: uppercase; }
.tp-body { font-family: var(--tp-font-text); font-size: var(--tp-body-size); line-height: var(--tp-body-lh); max-width: var(--tp-measure); }
.tp-caption { font-family: var(--tp-font-text); font-size: var(--tp-caption-size); line-height: var(--tp-caption-lh); color: var(--tp-text-secondary); }
.tp-data { font-family: var(--tp-font-mono); font-weight: 500; font-size: var(--tp-data-size); line-height: var(--tp-data-lh); }
.tp-data-hero { font-family: var(--tp-font-mono); font-weight: 500; font-size: var(--tp-data-lg-size); line-height: var(--tp-data-lh-lg); color: var(--tp-data); }

.tp-card { background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--tp-radius); padding: var(--tp-space-6); }
.tp-card--chanfro { border-radius: 0; clip-path: var(--tp-clip-chanfro); }
.tp-card--glow { box-shadow: var(--tp-glow); }

/* ── vidro (BDR-028) ───────────────────────────────── */
/* Folha sobre conteudo, nunca superficie de card. .tp-vidro e a barra
   (rodape de acao, barra de abas; --topo poe a borda embaixo p/ header);
   .tp-vidro-solto e a folha solta (menu, dialogo, drawer). Sem
   backdrop-filter o fallback e o solido de antes; nos escopos pais e
   documento os tokens solidificam sozinhos. */
.tp-vidro { background: var(--tp-preto-arena); border-top: 1px solid var(--tp-borda); position: relative; isolation: isolate; }
.tp-vidro--topo { border-top: none; border-bottom: 1px solid var(--tp-borda); }
.tp-vidro-solto { background: var(--tp-grafite); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .tp-vidro { background: var(--tp-vidro); -webkit-backdrop-filter: var(--tp-vidro-filtro); backdrop-filter: var(--tp-vidro-filtro); border-top-color: var(--tp-vidro-borda); }
  .tp-vidro--topo { border-bottom-color: var(--tp-vidro-borda); }
  .tp-vidro-solto { background: var(--tp-vidro); -webkit-backdrop-filter: var(--tp-vidro-filtro); backdrop-filter: var(--tp-vidro-filtro); }
}
/* A luz rasante atravessa a barra: banda violeta a 9%, volta de 11 s —
   abaixo do limiar de atencao. Parada (reduced motion), fica fora do quadro. */
.tp-vidro::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--tp-vidro-luz); background-size: 250% 100%; background-position: 200% 0; animation: tp-shimmer 11s linear infinite; }
/* Respiracao da acao primaria: so a luz varia. Aperto e disabled apagam;
   o escopo pais zera. O Button poe esta classe sozinho no variant primary. */
.tp-acao-respira { animation: tp-respira 3.2s var(--tp-ease) infinite alternate; }
.tp-acao-respira:not(:disabled):active, .tp-acao-respira:disabled { animation: none; }
[data-tp-scope="pais"] .tp-acao-respira { animation: none; }

.tp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--tp-space-2); height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--tp-radius-sm); cursor: pointer; font-family: var(--tp-font-label); font-size: 13px; letter-spacing: var(--tp-label-track); text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background var(--tp-dur-fast) var(--tp-ease), box-shadow var(--tp-dur) var(--tp-ease); }
.tp-btn--primary { background: var(--tp-action); color: var(--tp-action-text); }
.tp-btn--primary:hover { background: var(--tp-action-hover); box-shadow: var(--tp-glow-acao); }
.tp-btn--primary:active { background: var(--tp-violeta-deep); color: var(--tp-branco-player); }
.tp-btn--secondary { background: transparent; border-color: var(--tp-violeta-player); color: var(--tp-violeta-glow); }
.tp-btn--secondary:hover { background: var(--tp-violeta-08); }
.tp-btn--deep { background: var(--tp-violeta-deep); color: var(--tp-branco-player); }
.tp-btn--ghost { background: transparent; color: var(--tp-text-secondary); }
.tp-btn--ghost:hover { background: var(--tp-branco-04); color: var(--tp-text); }
.tp-btn--chanfro { border-radius: 0; clip-path: var(--tp-clip-chanfro); }
.tp-btn[disabled] { opacity: .35; cursor: not-allowed; }

.tp-input { height: 44px; width: 100%; padding: 0 14px; background: var(--tp-bg); color: var(--tp-text); border: 1px solid var(--tp-border); border-radius: var(--tp-radius-sm); outline: none; font-family: var(--tp-font-text); font-size: 15px; }
.tp-input:focus { border-color: var(--tp-violeta-player); box-shadow: 0 0 0 2px var(--tp-violeta-16); }
.tp-input--mono { font-family: var(--tp-font-mono); font-weight: 500; font-size: 14px; }

.tp-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--tp-radius-sm); font-family: var(--tp-font-label); font-size: 11px; letter-spacing: var(--tp-label-track); text-transform: uppercase; white-space: nowrap; }
.tp-badge--violeta { background: var(--tp-violeta-deep); color: var(--tp-branco-player); }
.tp-badge--contorno { border-color: var(--tp-violeta-player); color: var(--tp-violeta-glow); }
.tp-badge--ok { background: rgba(46,212,122,.14); color: var(--tp-ok); }
.tp-badge--limite { background: rgba(255,176,32,.14); color: var(--tp-warn); }
.tp-badge--bloqueio { background: rgba(255,77,94,.14); color: var(--tp-danger); }

/* Grid do sistema: 12 colunas, calha 24, margem 32 (mobile 20) */
.tp-grid { display: grid; grid-template-columns: repeat(var(--tp-grid-columns), 1fr); gap: var(--tp-grid-gutter); }
.tp-page { padding-inline: var(--tp-page-margin); }
@media (max-width: 640px) { .tp-page { padding-inline: var(--tp-page-margin-mobile); } }