/* ========================================================================== CASIES - TOKENS DE DESIGN (Variáveis Globais de Tema) ========================================================================== */ :root { /* 1. CORES DE MARCA (Estáticas - Não mudam com o tema) */ --casies-azul-01: #193282; --casies-azul-02: #2b4c9b; --casies-amarelo: #f0b429; --color-amarelo-moodle: var(--casies-amarelo); /* ========================================== MODO CLARO (Paleta Padrão) ========================================== */ --bg-fundo: #f4f6f8; /* Fundo principal da página (body) */ --bg-cartao: #ffffff; /* Fundo de cards, painéis e modais */ --bg-caixa: #f8fafc; /* Fundo de áreas de filtro e destaques */ --border-suave: #e2e8f0; /* Bordas de cartões e separadores leves */ --border-forte: #cbd5e1; /* Bordas de inputs e formulários */ --texto-titulo: var(--casies-azul-01); /* Títulos principais (H1, H2) */ --texto-corpo: #4a5568; /* Texto normal de parágrafos */ --texto-discreto: #64748b; /* Metadados, datas, legendas */ --cor-destaque: var(--casies-azul-01); /* Links, ícones e bordas ativas */ --cor-hover: var(--casies-azul-02); /* Cor ao passar o rato */ } /* ========================================== MODO ESCURO (Ativado na tag ) ========================================== */ body.dark-theme { --bg-fundo: #0f172a; /* Fundo escuro do ecrã inteiro */ --bg-cartao: #1e1e1e; /* Fundo dos cartões de notícia/galeria */ --bg-caixa: #2c2c2c; /* Fundo escuro para caixas de filtros */ --border-suave: #333333; --border-forte: #444444; --texto-titulo: #ffffff; --texto-corpo: #e0e0e0; --texto-discreto: #aaaaaa; /* No escuro, o amarelo oferece o melhor contraste para destaque */ --cor-destaque: var(--casies-amarelo); --cor-hover: #ffffff; } /* ========================================== APLICAÇÃO BASE DO TEMA ========================================== */ body { background-color: var(--bg-fundo); color: var(--texto-corpo); transition: background-color 0.3s ease, color 0.3s ease; }