/* Prontidão: tokens de design (variáveis CSS). Fonte da verdade: docs/maquete/maquete-inicio.html. Regra: os componentes usam SEMPRE var(--token), nunca cores soltas. O tema escuro aplica-se de duas formas: 1. automaticamente, se o sistema pedir (prefers-color-scheme: dark), exceto se a página forçar data-theme="light"; 2. à força, com ou "light". data-theme também funciona num elemento qualquer (ex.: um painel da montra design.html), que passa a usar as cores desse tema. */ @import url("/assets/css/fonts.css"); :root, [data-theme="light"] { /* ---- Cores base (claro), exatamente as da maquete ---- */ --bg: #F2FAF7; /* fundo da página */ --surface: #FFFFFF; /* cartões, folhas */ --ink: #13222B; /* texto principal */ --muted: #5E707B; /* texto secundário */ --line: #E1ECE8; /* linhas e contornos */ --mint: #18AE9F; /* cor da marca */ --mint-ink: #FFFFFF; /* texto sobre --mint */ --mint-soft: #DDF5EE; /* menta suave (fundos) */ --glow: #FFB27A; /* brilho laranja do topo */ --nav: #0F3B3A; /* barra de navegação */ --nav-ink: #CFE9E4; /* texto da barra */ --nav-ink-ativo: #FFFFFF; --warn: #E8590C; /* aviso (valores fora do normal) */ /* Cores dos ícones (iguais em claro e escuro) */ --i-green: #2BB673; --i-blue: #2F8CF0; --i-orange: #FF7A2E; --i-purple: #8B5CF6; --i-red: #EF4565; --i-cyan: #0EA5B7; --on-icon: #FFFFFF; /* desenho/texto sobre as cores de ícone */ /* ---- Estados semânticos (texto + fundo suave) ---- Escolhidos para texto normal passar AA (4,5:1) sobre --surface, --bg e o respetivo fundo suave (ver tests/test_contraste.py). */ --ok: #1B7A4B; --ok-soft: #E3F6EC; /* concluído / certo */ --parcial: #995700; --parcial-soft: #FFF1DC; /* parcial / incompleto */ --erro: #B8213F; --erro-soft: #FEEFF2; /* erro / em falta */ --info: #1C64B5; --info-soft: #EBF4FD; /* informação */ --bandeira: #B3122E; --bandeira-ink: #FFFFFF; /* bandeira vermelha (fundo cheio) */ /* Fundo escurecido atrás das folhas */ --veu: rgba(8, 20, 22, .55); /* Realce translúcido (separador ativo da nav) */ --realce-nav: rgba(255, 255, 255, .14); /* ---- Tipografia ---- */ --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --fs-xs: 11px; /* etiquetas, nav */ --fs-sm: 12.5px; /* notas, tabela */ --fs-base: 15px; /* corpo do texto */ --fs-md: 17px; /* títulos de secção (h3) */ --fs-lg: 22px; /* título de página/folha */ --fs-xl: clamp(26px, 6vw, 34px); --lh: 1.5; --peso-normal: 400; --peso-medio: 600; --peso-forte: 700; --peso-extra: 800; /* ---- Espaçamentos (escala de 4 px) ---- */ --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 20px; --esp-6: 24px; --esp-8: 32px; --gutter: 16px; /* margem lateral no telemóvel */ --largura-leitura: 720px; /* ---- Raios ---- */ --raio-sm: 12px; /* campos */ --raio-md: 14px; /* miniaturas, toast */ --raio-tile: 18px; /* azulejos, listas, tabela */ --raio-card: 20px; /* cartões */ --raio-sheet: 24px; /* folha */ --raio-pill: 999px; /* botões, chips */ /* ---- Sombras ---- */ --sombra-1: 0 1px 2px rgba(19, 34, 43, .06); --sombra-2: 0 8px 24px -12px rgba(19, 34, 43, .25); --sombra-3: 0 30px 60px -20px rgba(19, 34, 43, .35); --sombra-ic: inset 0 -3px 0 rgba(0, 0, 0, .12); /* ---- Camadas (z-index) ---- */ --z-topo: 5; --z-barra-acao: 9; --z-nav: 10; --z-sheet: 20; --z-toast: 30; /* ---- Acessibilidade e movimento ---- */ --toque-min: 44px; /* alvo de toque mínimo */ --foco: 3px solid var(--mint-forte); /* contorno de foco: ≥ 3:1 sobre os fundos (WCAG 1.4.11) */ --transicao: .15s ease; --altura-nav: 64px; /* reserva de espaço para a nav inferior */ /* ---- Cores de TEXTO com contraste AA (aprovado pelo dono, 2026-10-08) ---- As cores da maquete ficam para os usos decorativos (círculos dos ícones, bordas, brilho, diagramas). Quando a cor é usada como TEXTO, ou como FUNDO de texto, usa-se a versão "forte", que passa 4,5:1 (WCAG AA) em todos os fundos. tests/test_contraste.py verifica todas as combinações. */ --mint-forte: #117A70; /* .btn-primary, ligações, .go, contadores (branco: 5,20:1) */ --warn-texto: #B64609; /* .err, .vitals .w */ --i-green-forte: #208755; /* .thumb verde com texto branco */ --i-orange-forte: #CF4B00; /* .thumb laranja e .avatar com texto branco */ --i-blue-forte: #1075E1; /* .thumb azul */ --i-cyan-forte: #0B818F; /* .thumb ciano */ } /* Tema escuro automático (sistema), exceto se a página forçar o claro */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0B1A1C; --surface: #132629; --ink: #E6F2EF; --muted: #94AAA7; --line: #20383B; --mint: #2CCDBC; --mint-ink: #062221; --mint-soft: #163A37; --glow: #7A4626; --nav: #071415; --nav-ink: #9FC9C2; --mint-forte: #2CCDBC; --warn-texto: #F57C3A; --ok: #5BD79A; --ok-soft: #12332A; --parcial: #FFB65C; --parcial-soft: #3A2A12; --erro: #FF8099; --erro-soft: #3D1A22; --info: #7DB7FF; --info-soft: #13283F; --bandeira: #E11D48; --bandeira-ink: #FFFFFF; --sombra-1: 0 1px 2px rgba(0, 0, 0, .3); --sombra-2: 0 8px 24px -12px rgba(0, 0, 0, .6); --sombra-3: 0 30px 60px -20px rgba(0, 0, 0, .7); color-scheme: dark; } } /* Tema escuro forçado (mesmos valores que o bloco acima) */ :root[data-theme="dark"], [data-theme="dark"] { --bg: #0B1A1C; --surface: #132629; --ink: #E6F2EF; --muted: #94AAA7; --line: #20383B; --mint: #2CCDBC; --mint-ink: #062221; --mint-soft: #163A37; --glow: #7A4626; --nav: #071415; --nav-ink: #9FC9C2; --mint-forte: #2CCDBC; --warn-texto: #F57C3A; --ok: #5BD79A; --ok-soft: #12332A; --parcial: #FFB65C; --parcial-soft: #3A2A12; --erro: #FF8099; --erro-soft: #3D1A22; --info: #7DB7FF; --info-soft: #13283F; --bandeira: #E11D48; --bandeira-ink: #FFFFFF; --sombra-1: 0 1px 2px rgba(0, 0, 0, .3); --sombra-2: 0 8px 24px -12px rgba(0, 0, 0, .6); --sombra-3: 0 30px 60px -20px rgba(0, 0, 0, .7); color-scheme: dark; } /* Tema claro forçado: garante os controlos nativos claros */ [data-theme="light"] { color-scheme: light; }