/* ========================================================================== SGSAP — camada de tokens (fonte única de verdade das cores) -------------------------------------------------------------------------- Como funciona: 1. Há UMA entrada de cor: --sgsap-accent. Tudo que dela depende (hover, estados, superfícies tingidas, menu, foco) é derivado aqui com color-mix(), não calculado em JavaScript. 2. O tema é escolhido por [data-theme] no . Sem esse atributo, vale a preferência do sistema operacional — assim a página já nasce no tema certo, antes de qualquer script rodar. 3. Cada declaração derivada vem depois de um valor literal de reserva. Em navegador sem color-mix(), a linha derivada é ignorada e o literal fica. Ao mudar uma cor, mexa apenas nas variáveis. Componentes não devem trazer valores de cor próprios. ========================================================================== */ :root { color-scheme: light; /* --- entrada única -------------------------------------------------- --sgsap-accent-user é o que a pessoa escolheu (ou a cor institucional). --sgsap-accent é sempre a cor escolhida para preenchimentos. O token --sgsap-accent-legivel é sua variação para texto e ícones sobre fundos. */ --sgsap-accent-user: #2563a6; --sgsap-accent: var(--sgsap-accent-user); --sgsap-accent-legivel: #2563a6; /* --- superfícies ---------------------------------------------------- */ --sgsap-page: #f4f6fa; --sgsap-surface: #ffffff; --sgsap-surface-muted: #eef2f7; --sgsap-surface-raised: #ffffff; /* Superfície levemente tingida pelo destaque: dá unidade sem poluir. */ --sgsap-surface-tinted: #eef2f7; --sgsap-surface-tinted: color-mix(in srgb, var(--sgsap-accent) 6%, var(--sgsap-surface)); --sgsap-surface-hover: #e9eef5; --sgsap-surface-hover: color-mix(in srgb, var(--sgsap-accent) 10%, var(--sgsap-surface)); /* --- texto ---------------------------------------------------------- */ --sgsap-text: #1f2937; --sgsap-text-muted: #5a6675; --sgsap-text-inverse: #ffffff; /* Texto que fica por cima do destaque. O valor final é decidido pelo script a partir da luminância do destaque escolhido — é a única conta que o CSS ainda não faz de forma portátil. */ --sgsap-accent-contrast: #ffffff; /* --- bordas --------------------------------------------------------- */ --sgsap-border: #d5dde7; --sgsap-border-strong: #7f8a9a; --sgsap-border-subtle: #e6ebf2; /* --- derivados do destaque ------------------------------------------ */ --sgsap-accent-strong: #174a7c; --sgsap-accent-strong: color-mix(in srgb, var(--sgsap-accent) 78%, #000000); --sgsap-accent-soft: #e3ecf7; --sgsap-accent-soft: color-mix(in srgb, var(--sgsap-accent) 12%, var(--sgsap-surface)); --sgsap-accent-quiet: #f2f6fb; --sgsap-accent-quiet: color-mix(in srgb, var(--sgsap-accent) 6%, var(--sgsap-surface)); /* Menu lateral: preenchimento com a cor institucional exata. Os três tokens de texto apontam para o mesmo --sgsap-accent-contrast, de propósito. Antes eles eram branco com transparência (0.86 e 0.62) para criar hierarquia, e a transparência derrubava o contraste: entre 3,12:1 e 3,43:1 nas quatro cores do seletor, e 1,03:1 com amarelo. Hierarquia de menu agora vem de tamanho, peso e fundo — nunca de opacidade, que é contraste disfarçado de estilo. */ --sgsap-nav-surface: var(--sgsap-accent); --sgsap-nav-surface-strong: var(--sgsap-accent); --sgsap-nav-text: var(--sgsap-accent-contrast); --sgsap-nav-text-strong: var(--sgsap-accent-contrast); --sgsap-nav-text-muted: var(--sgsap-accent-contrast); --sgsap-nav-active: rgba(255, 255, 255, 0.14); --sgsap-nav-border: rgba(255, 255, 255, 0.12); /* --- estado --------------------------------------------------------- */ --sgsap-focus: #b45309; --sgsap-focus-ring: 0 0 0 0.2rem rgba(37, 99, 166, 0.35); --sgsap-focus-ring: 0 0 0 0.2rem color-mix(in srgb, var(--sgsap-accent) 40%, transparent); --sgsap-success: #18794e; --sgsap-warning: #9a6700; --sgsap-danger: #b42318; --sgsap-info: #155eef; --sgsap-success-soft: #e6f4ec; --sgsap-success-soft: color-mix(in srgb, var(--sgsap-success) 12%, var(--sgsap-surface)); --sgsap-warning-soft: #fbf1dd; --sgsap-warning-soft: color-mix(in srgb, var(--sgsap-warning) 14%, var(--sgsap-surface)); --sgsap-danger-soft: #fbeae8; --sgsap-danger-soft: color-mix(in srgb, var(--sgsap-danger) 12%, var(--sgsap-surface)); --sgsap-info-soft: #e7effd; --sgsap-info-soft: color-mix(in srgb, var(--sgsap-info) 12%, var(--sgsap-surface)); /* --- elevação e forma ----------------------------------------------- */ --sgsap-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --sgsap-shadow: 0 2px 8px rgba(15, 23, 42, 0.08); --sgsap-shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.12); --sgsap-backdrop: rgba(15, 23, 42, 0.62); --sgsap-radius: 0.75rem; --sgsap-radius-sm: 0.35rem; --sgsap-radius-md: 0.65rem; --sgsap-radius-lg: 0.9rem; --sgsap-radius-pill: 999px; /* --- espaçamento ---------------------------------------------------- */ --sgsap-space-1: 0.25rem; --sgsap-space-2: 0.5rem; --sgsap-space-3: 0.75rem; --sgsap-space-4: 1rem; --sgsap-space-5: 1.5rem; --sgsap-space-6: 2rem; /* --- tipografia ----------------------------------------------------- */ --sgsap-font-body: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --sgsap-font-size-body: 1rem; --sgsap-font-size-small: 0.875rem; --sgsap-font-size-title: clamp(1.45rem, 2vw, 2rem); --sgsap-font-weight-medium: 600; --sgsap-font-weight-bold: 700; /* --- movimento ------------------------------------------------------ Duração e curva ficam aqui pelo mesmo motivo que a cor: para que trocar o ritmo da interface seja editar quatro linhas, não caçar `0.3s` por sete arquivos. Quem consome é sgsap-motion.css. */ --sgsap-transition: 140ms ease; --sgsap-duracao-rapida: 120ms; --sgsap-duracao: 220ms; --sgsap-duracao-lenta: 380ms; /* Sai rápido e desacelera no fim: movimento de interface, não de slide. */ --sgsap-saida: cubic-bezier(.2, .8, .3, 1); } /* Paleta escura, aplicada em dois gatilhos: preferência do sistema (vale sem JavaScript e antes de o script rodar) e escolha explícita do usuário. Os dois blocos são idênticos de propósito. CSS não permite compartilhar uma regra entre dentro e fora de uma media query, e a indireção por variáveis intermediárias custaria o mesmo número de linhas com um salto a mais para ler. O teste test_os_dois_blocos_escuros_sao_identicos falha se divergirem. O primeiro gatilho é `:not([data-theme="light"])`, não `:not([data-theme])`: assim ele continua valendo se alguma tela marcar o atributo, e só quem escolheu claro escapa dele. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --sgsap-page: #0f1622; --sgsap-surface: #172131; --sgsap-surface-muted: #1e2a3d; --sgsap-surface-raised: #202d42; --sgsap-surface-tinted: #1b2739; --sgsap-surface-tinted: color-mix(in srgb, var(--sgsap-accent) 12%, var(--sgsap-surface)); --sgsap-surface-hover: #223047; --sgsap-surface-hover: color-mix(in srgb, var(--sgsap-accent) 18%, var(--sgsap-surface)); --sgsap-text: #eef2f8; --sgsap-text-muted: #a8b4c4; --sgsap-text-inverse: #0f1622; --sgsap-border: #33415a; --sgsap-border-strong: #70819a; --sgsap-border-subtle: #263349; --sgsap-accent-legivel: #7db6f1; --sgsap-accent-contrast: #ffffff; --sgsap-accent-strong: #a9d0f8; --sgsap-accent-strong: color-mix(in srgb, var(--sgsap-accent) 72%, #ffffff); --sgsap-accent-soft: #22344b; --sgsap-accent-soft: color-mix(in srgb, var(--sgsap-accent) 18%, var(--sgsap-surface)); --sgsap-accent-quiet: #1b2637; --sgsap-accent-quiet: color-mix(in srgb, var(--sgsap-accent) 9%, var(--sgsap-surface)); --sgsap-focus: #fbbf24; --sgsap-success: #6ee7a8; --sgsap-warning: #f6c85c; --sgsap-danger: #ff9b93; --sgsap-info: #93bdff; --sgsap-success-soft: color-mix(in srgb, var(--sgsap-success) 16%, var(--sgsap-surface)); --sgsap-warning-soft: color-mix(in srgb, var(--sgsap-warning) 16%, var(--sgsap-surface)); --sgsap-danger-soft: color-mix(in srgb, var(--sgsap-danger) 16%, var(--sgsap-surface)); --sgsap-info-soft: color-mix(in srgb, var(--sgsap-info) 16%, var(--sgsap-surface)); --sgsap-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --sgsap-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); --sgsap-shadow-lg: 0 14px 32px rgba(0, 0, 0, 0.5); } } [data-theme="dark"] { color-scheme: dark; --sgsap-page: #0f1622; --sgsap-surface: #172131; --sgsap-surface-muted: #1e2a3d; --sgsap-surface-raised: #202d42; --sgsap-surface-tinted: #1b2739; --sgsap-surface-tinted: color-mix(in srgb, var(--sgsap-accent) 12%, var(--sgsap-surface)); --sgsap-surface-hover: #223047; --sgsap-surface-hover: color-mix(in srgb, var(--sgsap-accent) 18%, var(--sgsap-surface)); --sgsap-text: #eef2f8; --sgsap-text-muted: #a8b4c4; --sgsap-text-inverse: #0f1622; --sgsap-border: #33415a; --sgsap-border-strong: #70819a; --sgsap-border-subtle: #263349; --sgsap-accent-legivel: #7db6f1; --sgsap-accent-contrast: #ffffff; --sgsap-accent-strong: #a9d0f8; --sgsap-accent-strong: color-mix(in srgb, var(--sgsap-accent) 72%, #ffffff); --sgsap-accent-soft: #22344b; --sgsap-accent-soft: color-mix(in srgb, var(--sgsap-accent) 18%, var(--sgsap-surface)); --sgsap-accent-quiet: #1b2637; --sgsap-accent-quiet: color-mix(in srgb, var(--sgsap-accent) 9%, var(--sgsap-surface)); --sgsap-focus: #fbbf24; --sgsap-success: #6ee7a8; --sgsap-warning: #f6c85c; --sgsap-danger: #ff9b93; --sgsap-info: #93bdff; --sgsap-success-soft: color-mix(in srgb, var(--sgsap-success) 16%, var(--sgsap-surface)); --sgsap-warning-soft: color-mix(in srgb, var(--sgsap-warning) 16%, var(--sgsap-surface)); --sgsap-danger-soft: color-mix(in srgb, var(--sgsap-danger) 16%, var(--sgsap-surface)); --sgsap-info-soft: color-mix(in srgb, var(--sgsap-info) 16%, var(--sgsap-surface)); --sgsap-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --sgsap-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); --sgsap-shadow-lg: 0 14px 32px rgba(0, 0, 0, 0.5); } @media (prefers-reduced-motion: reduce) { :root { --sgsap-transition: 0ms; --sgsap-duracao-rapida: 0ms; --sgsap-duracao: 0ms; --sgsap-duracao-lenta: 0ms; } }