/* VNDI — Design tokens extraídos de MANUAL_VNDI.pdf (10/09/2026) */ /* Ver README.md nesta pasta para regras de uso e contraste WCAG */ :root { /* Base */ --vndi-brown-dark: #491F08; /* texto principal sobre fundo claro — AAA */ --vndi-brown-mid: #763B13; /* texto de apoio/legendas sobre fundo claro — AAA */ --vndi-orange: #E18601; /* SOMENTE bloco/fundo — reprova contraste como texto */ --vndi-cream: #F2EEEB; /* fundo padrão do site */ --vndi-black: #0F0F0F; /* fundo escuro / seções de destaque */ --vndi-rust: #AB4C0A; /* cor de assinatura: títulos, links, ícones — AA em fundo claro, só título grande em fundo escuro */ --vndi-gold: #EFB420; /* destaques secundários, badges, hover sobre fundo escuro */ --vndi-yellow-light: #FFF1A6; /* fundos suaves, decorativo */ /* Tipografia */ --vndi-font-display: 'Phudu', sans-serif; /* títulos, números de impacto, CTAs curtos */ --vndi-font-body: 'Raleway', sans-serif; /* subtítulos, corpo de texto, widget "fonte para leitura" */ /* Escala tipográfica de referência (ver Typography.dc.html) */ --vndi-fs-hero: 56px; --vndi-fs-h2: 34px; --vndi-fs-h3: 22px; --vndi-fs-body: 17px; /* mínimo de corpo — nunca menor */ --vndi-fs-label: 13px; } /* --------------------------------------------------------------- Tokens semânticos — as páginas devem usar estes, não os de marca. Claro é o padrão; escuro segue prefers-color-scheme e pode ser forçado com (alternador do widget). Pares validados por scripts/check-contrast.mjs (WCAG AA/AAA). --------------------------------------------------------------- */ :root { color-scheme: light; --bg: #F2EEEB; --surface: #FBF9F7; --surface-alt: #E3DDD6; --text: #491F08; --text-muted: #6B5847; --heading: #AB4C0A; /* título grande (>=24px ou 19px bold) */ --link: #AB4C0A; --link-hover: #763B13; --border: #D9D0C3; /* decorativa */ --border-strong: #8A6F55; /* campos de formulário (>=3:1) */ --accent: #E18601; /* SÓ fundo/bloco */ --on-accent: #0F0F0F; --highlight: #FFF1A6; /* fundo suave / drawer */ --on-highlight: #491F08; --inverse-bg: #0F0F0F; /* faixas escuras dentro do tema claro */ --inverse-surface: #241A12; /* cards dentro de faixa invertida */ --inverse-text: #F2EEEB; --focus: #491F08; --shadow: 0 12px 30px rgba(0, 0, 0, .15); --gutter: 56px; /* margem lateral das seções (responsivo em responsive.css) */ } :root[data-theme="dark"] { color-scheme: dark; --bg: #0F0F0F; --surface: #241A12; --surface-alt: #3A2412; --text: #F2EEEB; --text-muted: #D8C4B0; --heading: #EFB420; --link: #EFB420; --link-hover: #FFF1A6; --border: #3A2A1C; --border-strong: #9A8874; --accent: #E18601; --on-accent: #0F0F0F; --highlight: #FFF1A6; --on-highlight: #491F08; --inverse-bg: #241A12; --inverse-surface: #3A2412; --inverse-text: #F2EEEB; --focus: #FFF1A6; --shadow: 0 12px 30px rgba(0, 0, 0, .6); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0F0F0F; --surface: #241A12; --surface-alt: #3A2412; --text: #F2EEEB; --text-muted: #D8C4B0; --heading: #EFB420; --link: #EFB420; --link-hover: #FFF1A6; --border: #3A2A1C; --border-strong: #9A8874; --accent: #E18601; --on-accent: #0F0F0F; --highlight: #FFF1A6; --on-highlight: #491F08; --inverse-bg: #241A12; --inverse-surface: #3A2412; --inverse-text: #F2EEEB; --focus: #FFF1A6; --shadow: 0 12px 30px rgba(0, 0, 0, .6); } }