/* Credere Design System — BASE/RESET (vendored, pinned v3.8.1). GERADO — não editar. */ /* * Credere Design System — Base / Reset * ------------------------------------------------------------------ * Camada base que o consumer importa UMA vez, junto dos tokens. É o * "setup obrigatório" (regra 5) shippado pelo DS, em vez de copiado na * mão em cada projeto: reset moderno (box model, margens da UA, mídia, * controles de form), base do (fonte, cor, superfície) e o reset * da fonte de ícones Material Symbols Rounded. * * Ordem de import no consumer: * @import "@credere/design-system/tokens"; (variáveis --credere-*) * @import "@credere/design-system/base"; (este arquivo) * * Precisa dos tokens carregados antes (referencia var(--credere-*)). * * Specificity baixa de propósito: os resets de elemento usam :where() * (specificity 0) para o consumer sobrescrever layout/tipografia da própria * app sem !important. O DS continua dono da APARÊNCIA dos componentes * (regra 6) — esta camada cuida só do global da página * (reset/body), que é trabalho do DS, não estiliza nenhum componente. */ /* ---------- Box model ---------- */ *, *::before, *::after { box-sizing: border-box; } /* * ---------- Margens da UA ---------- * Zera a margem default do navegador no body e nos elementos de fluxo. No DS, * espaçamento é EXPLÍCITO — vem de tokens (--credere-space-*) e do layout, não * da margem que o browser injeta em headings/parágrafos/listas. :where() deixa * o consumer reintroduzir margens quando quiser, sem briga de specificity. */ :where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol, fieldset) { margin: 0; } /* ---------- Body ---------- */ :where(body) { min-height: 100vh; font-family: var(--credere-font-family); font-size: var(--credere-typography-body-md); font-weight: var(--credere-typography-weight-body); line-height: var(--credere-line-height-relaxed); color: var(--credere-fg-primary); background: var(--credere-bg-primary); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* * ---------- Mídia ---------- * Elementos de mídia como block (evita o gap fantasma do inline) e nunca * estourando o container (responsivo por default). */ :where(img, picture, video, canvas, svg) { display: block; max-width: 100%; } /* * ---------- Controles de formulário ---------- * input/button/textarea/select não herdam fonte por default — herdam aqui pra * casar com a tipografia da app. (O DS prefere / * etc. — regra 4 — mas controles nativos residuais não devem destoar.) */ :where(input, button, textarea, select) { font: inherit; color: inherit; } /* Quebra palavras longas em vez de estourar a linha. */ :where(p, h1, h2, h3, h4, h5, h6) { overflow-wrap: break-word; } /* * ---------- Links ---------- * Link cru herda a cor do texto (o DS/consumer estiliza links intencionalmente — * não há cor de link "default azul" do browser). text-decoration-skip-ink: auto * deixa o sublinhado pular descendentes (g, p, y) em vez de cortá-los. */ :where(a) { color: inherit; text-decoration-skip-ink: auto; } /* * ---------- Tabelas ---------- * Tabela crua sem bordas duplas e sem o spacing default entre células. * ( tem o próprio estilo — regra 4 — isto é só o piso pra * tabelas nativas residuais.) */ :where(table) { border-collapse: collapse; border-spacing: 0; } /* * ---------- Régua ---------- *

como uma linha fina e tokenizada, sem o relevo 3D do browser. */ :where(hr) { height: var(--credere-border-width-thin); border: none; background: var(--credere-border); color: var(--credere-border); } /* * ---------- Âncoras ---------- * Ao pular pra um #id (link interno), dá um respiro acima do alvo pra ele não * colar no topo da viewport (e não ficar atrás de header fixo). */ :where(:target) { scroll-margin-block: var(--credere-space-padding-xl); } /* * ---------- Movimento reduzido (a11y) ---------- * Respeita prefers-reduced-motion: encurta animações/transições e desliga * scroll suave pra quem pediu menos movimento (WCAG 2.3.3 / motion sickness). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* * ---------- Ícones — Material Symbols Rounded (foundations §8 / regra 5) ---------- * Uso no markup: nome_do_icone * (id do ícone em https://fonts.google.com/icons). * * O CSS do Google Fonts traz `font-size: 24px` hardcoded em * `.material-symbols-rounded`. Como essa regra vive no light DOM, ela vence * `::slotted()` (shadow DOM perde na cascade de CSS Scoping para a mesma * propriedade, independente de specificity — só `!important` inverteria). * Por isso re-declaramos aqui com `font-size: inherit`/`font-variation-settings: * inherit`: o glifo cede o controle ao parent, e os componentes do DS aplicam * tamanho/eixos no próprio , com o ícone slotted herdando em flat tree. * * A fonte em si (a @import url do Google Fonts ou ) é carregada pelo * consumer — ver implementation-guide.md §1. Este arquivo só reseta o glifo. */ .material-symbols-rounded { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; font-size: inherit; display: inline-block; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr; font-feature-settings: 'liga'; font-variation-settings: inherit; -webkit-font-smoothing: antialiased; }