/* ==================================================================== Aethereuum — Design System · Camada de tokens (DS-1) -------------------------------------------------------------------- Fundação do Design System. Carregada DEPOIS de style.css e ADITIVA: não redefine nenhuma variável já existente (--primaria, --borda, --texto, --verde, --sombra, --raio…), apenas FORMALIZA a escala e adiciona tokens que ainda não existiam (spacing, type scale, radius scale, shadow scale, motion) + aliases semânticos que apontam para os tokens de cor já usados. Objetivo: um vocabulário único para padronizar as telas sem quebrar nenhuma (zero regressão). Regra de ouro: telas antigas continuam usando as vars antigas; telas novas e primitivos (DS-2) passam a usar estes tokens. Como os aliases apontam para as MESMAS cores, o produto fica coeso automaticamente. =========================================================================== */ :root { /* — Escala de espaçamento (base 4px) — um só ritmo para todo o app — */ --esp-0: 0; --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 20px; --esp-6: 24px; --esp-8: 32px; --esp-10: 40px; --esp-12: 48px; --esp-16: 64px; --esp-20: 80px; /* — Type scale (proporção ~1.20 · Major Third suave, previsível) — */ --fs-xs: 0.75rem; /* 12 — legendas, metadados */ --fs-sm: 0.875rem; /* 14 — texto auxiliar, rótulos */ --fs-base: 1rem; /* 16 — corpo padrão */ --fs-md: 1.125rem; /* 18 — corpo destacado */ --fs-lg: 1.375rem; /* 22 — títulos de card */ --fs-xl: 1.75rem; /* 28 — títulos de seção */ --fs-2xl: 2.25rem; /* 36 — títulos de página */ --fs-3xl: 3rem; /* 48 — heros internos */ --lh-tight: 1.15; /* títulos */ --lh-snug: 1.35; /* subtítulos */ --lh-base: 1.6; /* corpo */ --peso-normal: 400; --peso-medio: 500; --peso-semi: 600; --peso-forte: 700; /* Tracking para rótulos em caixa alta (eyebrows, chips) */ --track-caps: 0.06em; /* — Escala de raios (o --raio: 12px legado vira o passo "md") — */ --raio-xs: 6px; --raio-sm: 8px; --raio-md: 12px; /* == --raio legado */ --raio-lg: 16px; --raio-xl: 22px; --raio-full: 999px; /* — Escala de sombras (a --sombra legada continua sendo a "md") — */ --sombra-sm: 0 1px 2px rgba(20, 30, 60, .06), 0 1px 3px rgba(20, 30, 60, .05); --sombra-md: var(--sombra); --sombra-lg: 0 6px 16px rgba(20, 30, 60, .10), 0 18px 48px rgba(20, 30, 60, .10); --sombra-foco: 0 0 0 3px rgba(91, 75, 230, .28); /* — Movimento (durações + curvas padronizadas) — */ --mov-rapido: 120ms; --mov-medio: 220ms; --mov-lento: 380ms; --ease-saida: cubic-bezier(.4, 0, .2, 1); --ease-entrada: cubic-bezier(.16, 1, .3, 1); /* "spring" suave p/ reveals */ /* — Aliases semânticos (apontam p/ os tokens já existentes) — Novas telas e primitivos falam "semântico"; a cor real segue centralizada nas vars legadas, então nada diverge. */ --cor-acao: var(--primaria); --cor-acao-forte: var(--primaria-escura); --cor-texto: var(--texto); --cor-texto-suave: var(--texto-suave); --cor-superficie: var(--superficie); --cor-superficie-2: color-mix(in srgb, var(--superficie) 92%, var(--texto) 8%); --cor-borda: var(--borda); --cor-sucesso: var(--verde); --cor-perigo: var(--vermelho); --cor-alerta: var(--amarelo); /* Tinta translúcida da cor de ação, p/ fundos de chip/hover/seleção */ --tinta-acao: color-mix(in srgb, var(--primaria) 14%, transparent); --tinta-acao-forte: color-mix(in srgb, var(--primaria) 22%, transparent); /* — Skeleton (loading percebido) — */ --skel-base: color-mix(in srgb, var(--texto) 8%, var(--superficie)); --skel-brilho: color-mix(in srgb, var(--texto) 16%, var(--superficie)); } /* Ajustes finos das sombras no escuro (mais profundas, menos "leitosas") */ html[data-tema="escuro"] { --sombra-sm: 0 1px 2px rgba(0, 0, 0, .5); --sombra-lg: 0 8px 22px rgba(0, 0, 0, .45), 0 24px 60px rgba(0, 0, 0, .40); --sombra-foco: 0 0 0 3px rgba(138, 125, 255, .34); --cor-superficie-2: color-mix(in srgb, var(--superficie) 88%, #fff 12%); --skel-base: color-mix(in srgb, #fff 6%, var(--superficie)); --skel-brilho: color-mix(in srgb, #fff 14%, var(--superficie)); } /* ==================================================================== Melhorias globais seguras (sem alterar layout) =========================================================================== */ /* 1) Foco de teclado visível — AMPLIA a lista de style.css para cobrir controles que ficavam de fora (select, textarea, summary, elementos com role de interação, cards clicáveis genéricos). Só na navegação por teclado; nunca no clique de mouse. */ select:focus-visible, textarea:focus-visible, summary:focus-visible, [role="button"]:focus-visible, [role="tab"]:focus-visible, [role="link"]:focus-visible, [role="menuitem"]:focus-visible, [contenteditable="true"]:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; border-radius: var(--raio-xs); } /* 2) Transições suaves só em interações (cor/sombra/transform) — nunca em propriedades de layout, p/ não mexer em espaçamento de tela nenhuma. */ a, button, .btn, .hub-card, .card, summary, [role="button"] { transition: background-color var(--mov-rapido) var(--ease-saida), border-color var(--mov-rapido) var(--ease-saida), color var(--mov-rapido) var(--ease-saida), box-shadow var(--mov-medio) var(--ease-saida), transform var(--mov-medio) var(--ease-saida); } /* 3) Skeleton utilitário — trocar spinner/tela-vazia por carga percebida. Uso:
*/ .skel { position: relative; overflow: hidden; background: var(--skel-base); border-radius: var(--raio-sm); } .skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--skel-brilho), transparent); animation: skel-brilho 1.4s ease-in-out infinite; } .skel-texto { height: 0.9em; margin: 0.35em 0; border-radius: var(--raio-xs); } .skel-titulo { height: 1.4em; width: 55%; margin: 0.4em 0 0.7em; } .skel-circulo { border-radius: var(--raio-full); } @keyframes skel-brilho { to { transform: translateX(100%); } } /* 4) Respeito total a "reduzir movimento" — desliga transições e o shimmer do skeleton (complementa os blocos já existentes em style.css). */ @media (prefers-reduced-motion: reduce) { a, button, .btn, .hub-card, .card, summary, [role="button"] { transition: none; } .skel::after { animation: none; } html { scroll-behavior: auto; } }