/* ========================================================================== PAINEL — design tokens. Dois temas de verdade, um contrato só. -------------------------------------------------------------------------- Neutro por construção: a única cor "de marca" entra por --acento, que o config.js injeta. O escuro é grafite QUENTE (a família visual dos apps de TV); o claro é papel — não branco puro estourado. [data-tema] no : 'escuro' | 'claro'. Sem atributo = escolha do sistema. ========================================================================== */ :root { /* tipografia */ --f-display: 'Sora', sans-serif; --f-corpo: 'IBM Plex Sans', sans-serif; --f-mono: 'IBM Plex Mono', monospace; /* escala */ --t-xxl: 2.6rem; /* números do resumo */ --t-xl: 1.45rem; /* títulos de tela */ --t-lg: 1.06rem; --t-md: 0.94rem; --t-sm: 0.83rem; --t-xs: 0.74rem; --raio: 12px; --raio-s: 8px; --transicao: 160ms cubic-bezier(.4, 0, .2, 1); /* marca (o config sobrescreve em runtime) */ --acento: #E50914; --acento-suave: rgba(229, 9, 20, 0.12); } /* ---------- tema ESCURO (base) ---------- */ :root, :root[data-tema='escuro'] { --fundo: #131114; /* grafite quente — nunca preto puro */ --fundo-2: #1a171b; /* cards */ --fundo-3: #221e23; /* hover / inset */ --tinta: #eceaee; /* nunca branco puro */ --tinta-2: #a9a4ad; --tinta-3: #6e6a73; --linha: rgba(236, 234, 238, 0.09); --linha-forte: rgba(236, 234, 238, 0.16); --sombra: 0 10px 32px rgba(0, 0, 0, 0.42); --ok: #3fbf6f; --alerta: #e0a63a; --grao: 0.028; } /* ---------- tema CLARO ---------- */ :root[data-tema='claro'] { --fundo: #f4f2ef; /* papel — não #fff estourado */ --fundo-2: #fdfcfa; --fundo-3: #ebe8e4; --tinta: #221f24; --tinta-2: #5f5a64; --tinta-3: #98939d; --linha: rgba(34, 31, 36, 0.1); --linha-forte: rgba(34, 31, 36, 0.18); --sombra: 0 8px 26px rgba(34, 31, 36, 0.09); --ok: #22945a; --alerta: #ad7a13; --grao: 0.018; } /* sistema decide quando não há escolha gravada */ @media (prefers-color-scheme: light) { :root:not([data-tema]) { --fundo: #f4f2ef; --fundo-2: #fdfcfa; --fundo-3: #ebe8e4; --tinta: #221f24; --tinta-2: #5f5a64; --tinta-3: #98939d; --linha: rgba(34, 31, 36, 0.1); --linha-forte: rgba(34, 31, 36, 0.18); --sombra: 0 8px 26px rgba(34, 31, 36, 0.09); --ok: #22945a; --alerta: #ad7a13; --grao: 0.018; } }