/* ═══════════════════════════════════════════════════════════════
   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;
}

/* ── 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);

  /* 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%);

  /* 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;

  /* 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 — sem bounce, sem mola.
   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)); } }

@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);
  --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 */
  --tp-text-on-violeta: var(--tp-preto-arena);       /* REGRA DE OURO */
  --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-preto-arena);
  --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-preto-arena);
  --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;
}

/* 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;
}

/* 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;
  /* 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-tema-destaque: #B9D66A;                         /* 12,79:1 no preto, 11,50:1 no grafite */
  --tp-tema-brilho-rgb: 127 168 58;
  --tp-tema-fundo: repeating-linear-gradient(135deg, rgb(var(--tp-tema-brilho-rgb) / calc(0.05 * var(--tp-tema-forca))) 0 2px, transparent 2px 14px);
}
[data-tp-theme="battle-royale"] {
  --tp-grafite: #291A1C;                              /* o grafite com 9% do brilho */
  --tp-tema-destaque: #FFB35C;                         /* 11,76:1 no preto, 10,58:1 no grafite */
  --tp-tema-brilho-rgb: 255 122 26;
  --tp-tema-fundo: radial-gradient(circle at 50% 28%, transparent 0 33%, rgb(var(--tp-tema-brilho-rgb) / calc(0.07 * var(--tp-tema-forca))) 33.5% 35%, transparent 35.5%);
}
[data-tp-theme="construcao"] {
  --tp-grafite: #21171D;                              /* o grafite com 9% do brilho */
  --tp-tema-destaque: #DEA66C;                         /* 9,70:1 no preto, 8,72:1 no grafite */
  --tp-tema-brilho-rgb: 168 98 43;
  --tp-tema-fundo: repeating-linear-gradient(0deg, rgb(var(--tp-tema-brilho-rgb) / calc(0.06 * var(--tp-tema-forca))) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, rgb(var(--tp-tema-brilho-rgb) / calc(0.06 * var(--tp-tema-forca))) 0 1px, transparent 1px 24px);
}
[data-tp-theme="futebol"] {
  --tp-grafite: #141E22;                              /* o grafite com 9% do brilho */
  --tp-tema-destaque: #5FE09A;                         /* 12,52:1 no preto, 11,26:1 no grafite */
  --tp-tema-brilho-rgb: 23 168 90;
  --tp-tema-fundo: repeating-linear-gradient(180deg, rgb(var(--tp-tema-brilho-rgb) / calc(0.045 * var(--tp-tema-forca))) 0 40px, transparent 40px 80px);
}
[data-tp-theme="corrida"] {
  --tp-grafite: #27121E;                              /* o grafite com 9% do brilho */
  --tp-tema-destaque: #FF7A7A;                         /* 8,25:1 no preto, 7,42:1 no grafite */
  --tp-tema-brilho-rgb: 232 40 45;
  --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);
}
[data-tp-theme="retro"] {
  --tp-grafite: #291229;                              /* o grafite com 9% do brilho */
  --tp-tema-destaque: #FF7ADB;                         /* 8,99:1 no preto, 8,08:1 no grafite */
  --tp-tema-brilho-rgb: 255 43 176;
  --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);
}
/* 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: o LED rasante da casa, no brilho do tema. */
  --tp-tema-led: var(--tp-led-rasante);
  /* 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%);
}
[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: var(--tp-grafite);
}
/* 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: 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-led-rasante: linear-gradient(180deg, rgb(var(--tp-tema-brilho-rgb) / 0.22) 0%, rgb(var(--tp-tema-brilho-rgb) / 0) 100%);
}

/* ── 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); } }