/* Gema TCG — design tokens v1. * Contrato: canvas "Gema Design System" (30/08/2026). * Gramática: monocromo afiado, holo como única cor, números de terminal, * zero radius e zero sombra; a única curva da tela é a carta (4.8% / 3.4%). * Nomes canônicos primeiro; a ponte pros nomes legados de quanto-vale/pregrade * vem no fim (mesmos seletores, valores novos). */ /* As fontes (Tektur · Instrument Sans · Geist Mono) entram por no de cada página, com preconnect: o @import aqui atrasava o download até o fim da cadeia de CSS (landing.css -> tokens.css -> Google). */ :root { /* sala escura (as 3 ferramentas) */ --bg: #08090B; --panel: #12151B; --panel-2: #191D24; --hairline: #232830; --hairline-2: #2A303A; --ink: #E9ECEF; --muted: #8A929D; /* sala clara (editorial: landing, SEO) */ --paper: #FAFAF8; --paper-panel: #F1F2EF; --paper-hairline: #E3E4E0; --paper-ink: #16181B; --paper-muted: #666D77; /* movimento: dado, nunca decoração; o sinal +/- sempre acompanha a cor */ --up: #3FBF77; --down: #E5484D; --up-paper: #0C7A46; --down-paper: #C43138; /* holo: o orçamento inteiro de cor da marca (carta do logo, 1 CTA por página, sublinhado da nav ativa, momento gema) */ --holo: linear-gradient(135deg, #7FE0C3 0%, #9FC5F0 28%, #C9A6F5 55%, #F5A6C8 78%, #F7C9A0 100%); --holo-line: linear-gradient(90deg, #7FE0C3, #9FC5F0, #C9A6F5, #F5A6C8, #F7C9A0); /* tipo: teatro (Tektur) · sala (Instrument Sans) · terminal (Geist Mono) */ --font-display: 'Tektur', 'Instrument Sans', sans-serif; --font-sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'Geist Mono', 'SF Mono', ui-monospace, Menlo, monospace; /* a única curva da tela: o canto de 3mm de uma carta 63x88 */ --radius-card: 4.8% / 3.4%; /* status de aviso honesto (nunca holo, nunca decoração) */ --warning: #D9A62B; /* ------------------------------------------------------------------ */ /* ponte legada: nomes que quanto-vale/pregrade styles.css já consomem */ --brand-primary: var(--ink); --brand-accent: var(--ink); --brand-foil: var(--holo); --surface-base: var(--bg); --surface-raised: var(--panel); --surface-sunken: #060708; --surface-inverse: var(--ink); --text-primary: var(--ink); --text-secondary: var(--muted); --text-muted: var(--muted); --text-inverse: var(--bg); --border-default: var(--hairline); --border-strong: var(--hairline-2); --border-focus: var(--ink); --success: var(--up); --danger: var(--down); --info: #9FC5F0; --glow-primary: rgba(233, 236, 239, 0.10); --glow-accent: rgba(233, 236, 239, 0.10); --glow-success: rgba(63, 191, 119, 0.22); --glow-foil-pink: rgba(245, 166, 200, 0.12); --glow-foil-green: rgba(127, 224, 195, 0.12); /* zero radius: estados vivem no preenchimento e no fio */ --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; --radius-pill: 0; } /* sala clara: aplica o mapa de papel nos nomes semânticos. O contrato * já reservava esta sala pra landing/editorial; a classe no * troca a sala inteira e o chrome compartilhado segue os tokens. * Um bloco escuro dentro da página (ex: banner do heatmap) re-escopa as * mesmas variáveis localmente. */ .room-light { --bg: var(--paper); --panel: var(--paper-panel); --panel-2: #E9EAE5; --hairline: var(--paper-hairline); --hairline-2: #D6D8D2; --ink: var(--paper-ink); --muted: var(--paper-muted); --up: var(--up-paper); --down: var(--down-paper); }