/* * wes-tokens.css — A FONTE ÚNICA DE VERDADE DE CORES DO REWARDS * * Este arquivo só tem variáveis (cores e medidas), nunca uma receita pronta de elemento. * Quando o botão de tema liga/desliga a classe "dark" no , TODAS as variáveis do * bloco "html.dark" abaixo entram em vigor de uma vez só — é assim que o site troca de * modo claro pra escuro sem precisar mexer em cada página. * * Ver IMPLEMENTACAO-TEMA-REWARDS.md (raiz do projeto) pra entender o plano completo. */ /* MODO CLARO (padrão, quando a classe "dark" não está no ) */ :root { --wes-surface: #f9fafb; /* fundo da página */ --wes-surface-raised: #ffffff; /* card, painel de modal, barra lateral */ --wes-surface-sunken: #f3f4f6; /* campo de texto, área "afundada" */ --wes-border: #e5e7eb; --wes-text: #111827; /* título */ --wes-text-muted: #6b7280; /* descrição */ --wes-scroll-track: #f3f4f6; --wes-scroll-thumb: #cbd5e1; --wes-danger-bg: #fee2e2; --wes-danger-border: #fca5a5; --wes-danger-text: #b91c1c; --wes-info-bg: #dbeafe; --wes-info-border: #93c5fd; --wes-info-text: #1d4ed8; --wes-text-secondary: #4b5563; --wes-overlay: rgba(0, 0, 0, 0.8); /* fundo escurecido de modal — igual em claro e escuro, por isso só existe aqui */ --wes-success-bg: #dcfce7; --wes-success-border: #86efac; --wes-success-text: #15803d; --wes-warning-bg: #ffedd5; --wes-warning-border: #fdba74; --wes-warning-text: #c2410c; --wes-toggle-off: #d1d5db; --wes-toggle-on: #22c55e; /* verde de "ligado" — igual em claro e escuro, por isso não se repete no bloco html.dark */ --wes-scroll-thumb-hover: #94a3b8; } /* MODO ESCURO — mesma lista de variáveis, outros valores. */ html.dark { --wes-surface: #0e0e10; --wes-surface-raised: #18181b; --wes-surface-sunken: #1f1f23; --wes-border: #26262c; --wes-text: #ffffff; --wes-text-muted: #9ca3af; --wes-scroll-track: #0e0e10; --wes-scroll-thumb: #374151; --wes-danger-bg: rgba(69, 10, 10, 0.5); --wes-danger-border: rgba(127, 29, 29, 0.5); --wes-danger-text: #f87171; --wes-info-bg: rgba(30, 58, 138, 0.2); --wes-info-border: rgba(30, 58, 138, 0.5); --wes-info-text: #60a5fa; --wes-text-secondary: #d1d5db; --wes-success-bg: rgba(20, 83, 45, 0.3); --wes-success-border: #166534; --wes-success-text: #4ade80; --wes-warning-bg: rgba(124, 45, 18, 0.3); --wes-warning-border: #9a3412; --wes-warning-text: #fb923c; --wes-toggle-off: #374151; --wes-scroll-thumb-hover: #4b5563; } /* * Cor de destaque por área do site — laranja no admin, roxo na área do espectador. * A página se declara uma única vez, no : * ou */ [data-wes-area="admin"] { --wes-accent: #ea580c; --wes-accent-hover: #c2410c; } [data-wes-area="user"] { --wes-accent: #9146FF; --wes-accent-hover: #772CE8; }