/* * PlayTCG 2.0 - Design Tokens * Sistema de variáveis CSS para padronização visual * * Uso: var(--tcg-nome-da-variavel) * Exemplo: color: var(--tcg-accent); * * Regras do sistema 2.0: * - Raio 0 em tudo. Separação por borda de 2px (tinta) e régua de 1px (neutral 200). * - Sem sombra em nenhum nível. * - Resultado de partida é mono, sem semáforo: vitória vermelha, derrota grafite, empate cinza. */ :root { /* ======================================== CORES - Paleta PlayTCG 2.0 ======================================== */ /* Papéis base */ --tcg-ground: #f3f2f2; /* fundo de página */ --tcg-surface: #ffffff; /* cartão, tabela, campo */ --tcg-ink: #201e1d; /* texto, réguas, sidebar, barra de cabeçalho */ /* Acento — ação primária, "ao vivo", vitória */ --tcg-accent: #ec3013; --tcg-accent-700: #c2260f; /* Um passo abaixo do 700, adicionado em 11/09/2026 para o hover do botão primário. Com o 700 no repouso (5,87:1 sobre branco), o hover precisava de algo mais escuro — usar o accent puro ali fazia o botão REPROVAR contraste justamente no estado em que o usuário está prestes a clicar. 7,33:1. É a única cor nova do sistema desde o handoff. */ --tcg-accent-800: #a81f0b; /* texto em vermelho, :hover/:active do primário */ --tcg-accent-100: #fdecea; /* fundo tingido (linha "você", trilho do loader) */ /* Neutros */ --tcg-neutral-200: #e2e0df; /* fill neutro, régua de linha, trilho de barra */ --tcg-neutral-300: #c9c6c4; /* borda secundária de campo, empate */ --tcg-neutral-500: #8a8582; /* texto terciário sobre escuro */ --tcg-neutral-600: #6b6663; /* rótulos, texto secundário */ --tcg-neutral-700: #4a4644; /* corpo secundário, derrota */ /* Modo Arena (escuro) */ --tcg-arena-900: #141312; /* fundo do modo escuro */ --tcg-arena-800: #201e1d; /* superfície do modo escuro */ --tcg-arena-700: #2c2a28; /* superfície elevada / botão secundário no escuro */ /* Resultado de partida — mono, sem semáforo */ --tcg-result-win: var(--tcg-accent); --tcg-result-loss: var(--tcg-neutral-700); --tcg-result-draw: var(--tcg-neutral-300); /* ======================================== CORES - Aliases de marca (compatibilidade) ======================================== */ --tcg-primary: var(--tcg-accent); --tcg-primary-light: var(--tcg-accent); --tcg-primary-dark: var(--tcg-accent-700); --tcg-primary-bg: var(--tcg-accent-100); /* ======================================== CORES - Feedback ------------------------------------------ O sistema 2.0 não usa semáforo. Confirmação lê como tinta, atenção lê como grafite e erro usa a família do acento (fundo accent-100 + borda accent + texto accent-700). ======================================== */ --tcg-success: var(--tcg-ink); --tcg-success-light: var(--tcg-neutral-700); --tcg-success-bg: var(--tcg-neutral-200); --tcg-warning: var(--tcg-neutral-700); --tcg-warning-light: var(--tcg-neutral-600); --tcg-warning-bg: var(--tcg-neutral-200); --tcg-error: var(--tcg-accent); --tcg-error-light: var(--tcg-accent-700); --tcg-error-bg: var(--tcg-accent-100); --tcg-info: var(--tcg-ink); --tcg-info-bg: var(--tcg-neutral-200); /* ======================================== CORES - Backgrounds ======================================== */ --tcg-bg-page: var(--tcg-ground); --tcg-bg-card: var(--tcg-surface); --tcg-bg-header: var(--tcg-ink); --tcg-bg-hover: var(--tcg-neutral-200); --tcg-bg-active: var(--tcg-accent-100); /* ======================================== CORES - Texto ======================================== */ --tcg-text-primary: var(--tcg-ink); --tcg-text-secondary: var(--tcg-neutral-700); --tcg-text-tertiary: var(--tcg-neutral-600); --tcg-text-disabled: var(--tcg-neutral-500); --tcg-text-inverse: var(--tcg-ground); --tcg-text-on-dark: var(--tcg-neutral-500); /* ======================================== CORES - Bordas ======================================== */ --tcg-border-color: var(--tcg-ink); --tcg-border-color-light: var(--tcg-neutral-200); --tcg-border-color-dark: var(--tcg-ink); /* neutral-500, não neutral-300. A borda de campo em repouso é o limite de um componente e a WCAG 1.4.11 exige 3:1 contra o fundo adjacente; o #c9c6c4 anterior dava 1,52:1 sobre o ground. A crítica achou o sintoma na tela de torneios — o campo de busca era o elemento mais fraco da página, com dois botões secundários de borda 2px em tinta ao lado dele — mas a causa é este token, que vale para todo campo do produto. #8a8582 dá 3,26:1. */ --tcg-border-color-field: var(--tcg-neutral-500); /* Borda de cartão/tabela e régua entre linhas */ --tcg-border-frame: 2px solid var(--tcg-ink); --tcg-border-rule: 1px solid var(--tcg-neutral-200); /* ======================================== ESPAÇAMENTO — escala base 8: 4 · 8 · 16 · 24 · 32 · 48 · 64 ======================================== */ --tcg-space-xxs: 4px; --tcg-space-xs: 4px; --tcg-space-sm: 8px; --tcg-space-md: 16px; --tcg-space-lg: 24px; --tcg-space-xl: 32px; --tcg-space-xxl: 48px; --tcg-space-xxxl: 64px; /* ======================================== TIPOGRAFIA — Archivo (400/500/600/700) ======================================== */ --tcg-font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --tcg-font-size-xs: 11px; /* rótulo: 700, letter-spacing 1.5px, MAIÚSCULAS */ --tcg-font-size-sm: 13px; /* mínimo de corpo */ --tcg-font-size-base: 15px; /* corpo */ --tcg-font-size-lg: 16px; --tcg-font-size-xl: 20px; /* seção */ --tcg-font-size-xxl: 26px; --tcg-font-size-xxxl: 32px; /* título */ --tcg-font-size-display: 56px; /* Rótulo de aba é o único texto de 10px permitido */ --tcg-font-size-tab-label: 10px; /* Escala de destaque — número que É o assunto da célula, e nome em bloco de herói. Não é para texto: se o valor está dentro de uma tabela, ele é --tcg-font-size-sm tabular. Ver "Hierarchy" no DESIGN.md. Existiam como literais espalhados em seis arquivos até 12/09/2026; viraram token quando o dono confirmou que a escala é intencional. */ --tcg-font-size-metric: 38px; /* métrica principal, na raiz */ --tcg-font-size-metric-md: 30px; /* mesma métrica no primeiro ponto de quebra */ --tcg-font-size-metric-compact: 24px; /* métrica em cartão menor ou faixa de apoio */ --tcg-font-size-season: 52px; /* ranking no cartão de temporada (painel do jogador) */ --tcg-font-size-table-number: 96px; /* número da mesa no modo Arena, lido de pé */ --tcg-font-weight-normal: 400; --tcg-font-weight-medium: 500; --tcg-font-weight-semibold: 600; --tcg-font-weight-bold: 700; --tcg-line-height-tight: 1.15; --tcg-line-height-normal: 1.55; --tcg-line-height-relaxed: 1.75; --tcg-letter-spacing-display: -0.03em; --tcg-letter-spacing-title: -0.02em; --tcg-letter-spacing-label: 1.5px; --tcg-letter-spacing-group: 2px; /* ======================================== BORDAS E RAIOS — raio 0 em tudo ======================================== */ --tcg-border-radius-sm: 0; --tcg-border-radius: 0; --tcg-border-radius-lg: 0; --tcg-border-radius-xl: 0; --tcg-border-radius-full: 0; --tcg-border-width: 1px; --tcg-border-width-thick: 2px; /* ======================================== SOMBRAS — nenhuma. A separação é a borda. ======================================== */ --tcg-shadow-xs: none; --tcg-shadow-sm: none; --tcg-shadow-md: none; --tcg-shadow-lg: none; --tcg-shadow-xl: none; --tcg-shadow-card-hover: none; /* ======================================== ALVO DE TOQUE E FOCO ======================================== */ --tcg-touch-target: 44px; --tcg-focus-outline: 2px solid var(--tcg-accent); --tcg-focus-outline-offset: 2px; --tcg-disabled-opacity: 0.45; /* ======================================== TRANSIÇÕES ======================================== */ --tcg-transition-fast: 150ms ease; --tcg-transition-normal: 250ms ease; --tcg-transition-slow: 350ms ease; /* ======================================== Z-INDEX ======================================== */ --tcg-z-dropdown: 1000; --tcg-z-sticky: 1020; --tcg-z-fixed: 1030; --tcg-z-modal-backdrop: 1040; --tcg-z-modal: 1050; --tcg-z-popover: 1060; --tcg-z-tooltip: 1070; /* ======================================== BREAKPOINTS (para referência) ======================================== */ --tcg-breakpoint-xs: 576px; --tcg-breakpoint-sm: 768px; --tcg-breakpoint-md: 992px; --tcg-breakpoint-lg: 1200px; --tcg-breakpoint-xl: 1600px; /* ======================================== SHELL DO WEB ======================================== */ --tcg-sidebar-width: 236px; --tcg-topbar-height: 64px; --tcg-nav-item-height: 42px; /* ======================================== COMPONENTES ESPECÍFICOS ======================================== */ /* Page */ --tcg-page-padding: var(--tcg-space-lg); --tcg-page-padding-mobile: var(--tcg-space-md); /* Card */ --tcg-card-padding: var(--tcg-space-lg); --tcg-card-padding-mobile: var(--tcg-space-md); --tcg-card-border-radius: 0; --tcg-card-shadow: none; /* Table */ --tcg-table-header-bg: var(--tcg-ink); --tcg-table-header-color: var(--tcg-ground); --tcg-table-row-hover-bg: var(--tcg-neutral-200); --tcg-table-row-self-bg: var(--tcg-accent-100); --tcg-table-cell-padding: 10px 12px; /* Stat Card */ --tcg-stat-card-min-height: 100px; --tcg-stat-value-size: 38px; --tcg-stat-title-size: var(--tcg-font-size-xs); } /* ======================================== MEDIA QUERIES - Ajustes por breakpoint ======================================== */ @media (max-width: 768px) { :root { --tcg-page-padding: var(--tcg-space-md); --tcg-card-padding: var(--tcg-space-md); --tcg-stat-value-size: 30px; } } @media (max-width: 576px) { :root { --tcg-page-padding: var(--tcg-space-sm); --tcg-card-padding: var(--tcg-space-md); --tcg-stat-value-size: 26px; --tcg-stat-card-min-height: 80px; } }