/* ============================================================================
* VEUS Quiz — Theme Light (Receita 15) + accent coral + Space Grotesk
* MVP 1.3 / M6 frontend (2026-05-16).
*
* Filosofia: estender quiz.css (que cobre home.html legado e define toda a
* paleta dark) com:
*
* (a) Variável de accent terciário GATE M9 = "veus-coral" (#E2598F),
* usada APENAS como micro-detalhe (progressbar de pergunta,
* feedback "acertou", badges de pontos). Quiz permanece dominante
* cinza+amarelo VEUS — o coral nunca é cor base.
*
* (b) Família display secundária "Space Grotesk" via @font-face self-hosted
* (variable woff2, range latin). Aplicada APENAS nas telas novas
* (list/take/result/edit). Hero/home continuam Barlow Condensed —
* integridade visual do produto consolidado.
*
* (c) Light theme Receita 15 — toggle explícito via [data-theme="light"]
* no . Mesma personalidade visual do dark, paleta invertida em
* luminância. Amarelo VEUS permanece sotaque, com hover mais escuro
* (#956200 WCAG AA-safe sobre fundo claro).
*
* Ordem de carga obrigatória: quiz.css → quiz-theme.css → quiz-pages.css.
*
* Cobertura acessibilidade (verificada):
* Light:
* - Texto body (#1A1D22) sobre creme (#FAFAF7) = 14.8:1 (AAA)
* - Texto soft (#525A66) sobre creme = 7.3:1 (AAA)
* - Texto faint (#6B7280) sobre creme = 5.0:1 (AA)
* - Amarelo link (#956200) sobre creme = 5.5:1 (AA)
* - Texto CTA escuro (#1A1300) sobre amarelo (#FFB316)= 13.7:1 (AAA)
* - Coral link (#A8326C) sobre creme = 5.6:1 (AA)
* - Border funcional (#8A8A8A) sobre creme = 3.3:1 (AA non-text)
* Dark:
* - Coral soft (#FF85B0) sobre ink-900 (#0A0A0B) = 6.9:1 (AAA)
* - Texto body já validado em quiz.css.
* ========================================================================== */
/* ====================================================================
* (1) Family display secundária: Space Grotesk (variable, latin)
* ==================================================================== */
@font-face {
font-family: "Space Grotesk";
src: url("/static/fonts/SpaceGrotesk-latin.woff2") format("woff2-variations"),
url("/static/fonts/SpaceGrotesk-latin.woff2") format("woff2");
font-weight: 300 700;
font-style: normal;
font-display: swap;
/* Latin range — Greek/Vietnamese fallback cairá no Inter/Barlow. */
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ====================================================================
* (2) Acento terciário coral — gate M9
*
* Decisão M9 (2026-05-16): magenta vibrante #FF3D8B foi PIVOTADO para
* coral-rose #E2598F (mais editorial, menos "tech-bro"). Aplicado SÓ
* em micro-detalhes — Quiz continua dominante VEUS gray+yellow.
*
* Tons disponíveis:
* --quiz-coral : base (#E2598F)
* --quiz-coral-soft : versão AAA dark (#FF85B0 — 6.9:1 on #0A0A0B)
* --quiz-coral-deep : versão AA light text (#A8326C — 5.6:1 on #FAFAF7)
* --quiz-coral-glow : rgba para auras (rgba(226,89,143,.35))
* ==================================================================== */
:root {
--quiz-coral: #E2598F;
--quiz-coral-soft: #FF85B0;
--quiz-coral-deep: #A8326C;
--quiz-coral-glow: rgba(226, 89, 143, 0.35);
--quiz-coral-glow-soft:rgba(226, 89, 143, 0.12);
/* Family display secundária — só aplicada em .quiz-page-*. */
--quiz-font-display-2: "Space Grotesk", "Barlow Condensed", system-ui, sans-serif;
}
/* ====================================================================
* (3) Tokens light — override sob [data-theme="light"]
* ==================================================================== */
:root[data-theme="light"] {
/* Escala neutra invertida — "ink" agora são tons claros/grisalhos suaves.
Nome mantido por compatibilidade com seletores em quiz.css. */
--veus-ink-1000: #ffffff;
--veus-ink-900: #fafaf7; /* creme institucional (base shell) */
--veus-ink-850: #f4f3ee;
--veus-ink-800: #efeee8;
--veus-ink-750: #eae7df; /* card bg sutil */
--veus-ink-700: #e3dfd4;
--veus-ink-650: #d8d3c5;
--veus-ink-600: #cfcac0; /* divisor */
--veus-ink-500: #a8a39a;
--veus-ink-400: #8a8580;
--veus-ink-300: #6b6862;
--veus-ink-200: #4a4845;
--veus-ink-100: #2a2825;
--veus-ink-50: #1a1816;
/* Texto canônico — escuro sobre fundo creme. */
--veus-text: #1a1d22; /* AAA 14.8:1 */
--veus-text-soft: #525a66; /* AAA 7.3:1 */
--veus-text-faint: #6b7280; /* AA 5.0:1 */
/* Amarelo: o tone primário (#FFB316) permanece como sotaque (CTAs);
links/hover usam yellow-deep escuro para passar contrast em fundos claros. */
--veus-yellow-soft: #b07300; /* AA 7.4:1 */
--veus-yellow-deep: #7e5400; /* AAA 8.2:1 */
--veus-yellow-warm: #5e4001; /* AAA 11.0:1 — lede em light */
/* Coral terciário — substitui versões soft/glow para passar contrast. */
--quiz-coral-soft: #A8326C; /* AA 5.6:1 — text on cream */
--quiz-coral-glow: rgba(168, 50, 108, 0.30);
--quiz-coral-glow-soft:rgba(168, 50, 108, 0.10);
/* Sombras suaves de papel — menor profundidade, mais editorial. */
--veus-shadow-card: 0 1px 2px rgba(28, 30, 36, 0.04),
0 8px 28px -12px rgba(28, 30, 36, 0.14);
--veus-shadow-card-warm:
0 1px 2px rgba(28, 30, 36, 0.04),
0 8px 28px -12px rgba(28, 30, 36, 0.14),
0 0 0 1px rgba(255, 179, 22, 0.18),
0 14px 40px -18px rgba(255, 179, 22, 0.35);
--veus-shadow-cta: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
0 10px 30px -12px rgba(255, 179, 22, 0.55);
--veus-glow-yellow: 0 0 0 1px rgba(255, 179, 22, 0.34),
0 0 18px -2px rgba(255, 179, 22, 0.45);
}
/* ====================================================================
* (4) Shell light — atmosfera clara
*
* Mantém o motivo dos gradientes do dark, puxados para tons creme/papel,
* criando "luz natural editorial" em vez de "vidro polarizado".
* ==================================================================== */
:root[data-theme="light"] body {
background: var(--veus-ink-900);
color: var(--veus-text);
}
[data-theme="light"] .veus-shell {
background:
radial-gradient(circle at 92% -10%,
rgba(89, 89, 89, 0.07) 0%,
rgba(89, 89, 89, 0.03) 28%,
transparent 55%),
radial-gradient(circle at -5% 100%,
rgba(255, 179, 22, 0.08) 0%,
transparent 38%),
linear-gradient(135deg,
#fafaf7 0%,
#f4f2ec 48%,
#ffffff 100%);
}
/* Grão: em light fica quase invisível para não virar "sujeira de papel barato". */
[data-theme="light"] .veus-shell::before {
opacity: 0.025;
mix-blend-mode: multiply;
}
/* Dots pattern: em light, vira marca d'água apenas perceptível. */
[data-theme="light"] .veus-shell::after {
opacity: 0.18;
background-image: url("data:image/svg+xml;utf8,");
}
/* ====================================================================
* (5) Topbar light
* ==================================================================== */
[data-theme="light"] .veus-topbar {
border-bottom-color: var(--veus-ink-600);
}
[data-theme="light"] .veus-topbar__icon {
box-shadow: 0 0 0 1px rgba(28, 30, 36, 0.08);
}
[data-theme="light"] .veus-topbar__app-tag {
color: var(--veus-yellow-deep);
background: rgba(255, 179, 22, 0.10);
border-color: rgba(255, 179, 22, 0.45);
}
[data-theme="light"] .veus-topbar__app-tag svg {
color: var(--veus-yellow-deep);
}
[data-theme="light"] .veus-tag {
background: rgba(28, 30, 36, 0.03);
color: var(--veus-text-soft);
}
[data-theme="light"] .veus-tag--live { color: var(--veus-text); }
/* ====================================================================
* (6) Hero / títulos light
* ==================================================================== */
[data-theme="light"] .veus-hero__title { color: var(--veus-text); }
[data-theme="light"] .veus-hero__line--3,
[data-theme="light"] .veus-hero__line--4 { color: var(--veus-text-soft); }
[data-theme="light"] .veus-hero__watermark {
background: linear-gradient(180deg, rgba(255, 179, 22, 0.18) 0%, rgba(255, 179, 22, 0) 60%);
-webkit-background-clip: text;
background-clip: text;
}
[data-theme="light"] .veus-hero__lede { color: var(--veus-text-soft); }
[data-theme="light"] .veus-hero__lede strong { color: var(--veus-text); }
[data-theme="light"] .veus-hero__line em {
color: var(--veus-yellow-deep);
}
[data-theme="light"] .veus-hero__hint { color: var(--veus-text-faint); }
[data-theme="light"] .veus-hero__hint a { color: var(--veus-text-soft); }
[data-theme="light"] .veus-kbd {
border-color: var(--veus-ink-500);
background: rgba(28, 30, 36, 0.04);
color: var(--veus-text-soft);
}
/* ====================================================================
* (7) CTAs light
* ==================================================================== */
[data-theme="light"] .veus-cta--ghost {
border-color: var(--veus-ink-500);
color: var(--veus-text);
background: rgba(255, 255, 255, 0.55);
}
[data-theme="light"] .veus-cta--ghost:hover {
border-color: var(--veus-yellow-deep);
color: var(--veus-yellow-deep);
background: rgba(255, 179, 22, 0.08);
}
[data-theme="light"] .veus-link-quiet { color: var(--veus-text-soft); }
[data-theme="light"] .veus-link-quiet:hover {
color: var(--veus-text);
border-bottom-color: var(--veus-yellow-deep);
}
/* ====================================================================
* (8) Strips / Progression / Tracks light
* ==================================================================== */
[data-theme="light"] .veus-progression {
border-top-color: var(--veus-ink-600);
border-bottom-color: var(--veus-ink-600);
}
[data-theme="light"] .veus-progression__step {
border-top-color: var(--veus-ink-500);
}
[data-theme="light"] .veus-progression__step--next {
border-top-color: var(--veus-yellow-deep);
background: linear-gradient(180deg, rgba(255, 179, 22, 0.10) 0%, rgba(255, 179, 22, 0) 100%);
box-shadow: inset 0 1px 0 0 rgba(255, 179, 22, 0.18);
}
[data-theme="light"] .veus-progression__num { color: var(--veus-text-faint); }
[data-theme="light"] .veus-progression__step--next .veus-progression__num {
color: var(--veus-yellow-deep);
}
[data-theme="light"] .veus-progression__legend { color: var(--veus-text-soft); }
[data-theme="light"] .veus-strip__card {
background: linear-gradient(180deg, #ffffff, #fafaf7);
border-color: var(--veus-ink-600);
box-shadow: var(--veus-shadow-card);
}
[data-theme="light"] .veus-strip__card:hover {
border-color: var(--veus-ink-500);
}
[data-theme="light"] .veus-strip__card--rank {
border-color: rgba(255, 179, 22, 0.45);
background: linear-gradient(180deg, #fffaef, #fdf4dc);
box-shadow: var(--veus-shadow-card-warm);
}
[data-theme="light"] .veus-strip__big { color: var(--veus-text); }
[data-theme="light"] .veus-strip__den { color: var(--veus-text-faint); }
[data-theme="light"] .veus-strip__sub { color: var(--veus-text-soft); }
[data-theme="light"] .veus-strip__hash { color: var(--veus-yellow-deep); }
[data-theme="light"] .veus-track {
border-color: var(--veus-ink-600);
background: #ffffff;
box-shadow: var(--veus-shadow-card);
}
[data-theme="light"] .veus-track:hover {
background: #fcfaf3;
border-color: var(--veus-ink-500);
box-shadow: var(--veus-shadow-card-warm);
}
[data-theme="light"] .veus-track:hover .veus-track__icon { color: var(--veus-yellow-deep); }
[data-theme="light"] .veus-track__title { color: var(--veus-text); }
[data-theme="light"] .veus-track__copy { color: var(--veus-text-soft); }
[data-theme="light"] .veus-track__icon { color: var(--veus-text-faint); }
[data-theme="light"] .veus-track__index { color: var(--veus-text-faint); }
[data-theme="light"] .veus-track::after { background: rgba(255, 179, 22, 0.18); }
[data-theme="light"] .veus-track:hover::after { background: rgba(255, 179, 22, 0.32); }
/* ====================================================================
* (9) Footer light
* ==================================================================== */
[data-theme="light"] .veus-foot {
border-top-color: var(--veus-ink-600);
color: var(--veus-text-faint);
}
[data-theme="light"] .veus-foot__lockup {
filter: invert(0.85) brightness(0.4) contrast(1.3);
/* PNG branco original — em light invertemos para ficar legível.
filter aproxima cinza médio sem refazer o lockup. */
}
[data-theme="light"] .veus-foot__hash { color: var(--veus-ink-400); }
/* ====================================================================
* (10) Theme toggle button (sun/moon) — UI control universal
*
* Posição: dentro do .veus-topbar__meta, antes do .veus-tag/form.
* Marca DOM:
*
*
* Default = dark mode → mostra ÍCONE SOL (ação: ir pra light).
* data-theme="light" → mostra ÍCONE LUA (ação: ir pra dark).
* ==================================================================== */
.veus-theme-toggle {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
/* flex-shrink:0 impede que o flexbox do .veus-topbar__meta esmague o
botão em viewport estreito (≤375px) — sem isto vira elipse horizontal
(medido: 26px de largura @320px). Mantém o círculo 38×38. */
flex-shrink: 0;
width: 38px;
height: 38px;
border: 1px solid var(--veus-ink-600);
border-radius: 50%;
background: rgba(255, 255, 255, 0.02);
color: var(--veus-text-soft);
cursor: pointer;
transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.veus-theme-toggle:hover {
color: var(--veus-yellow);
border-color: var(--veus-yellow);
background: rgba(255, 179, 22, 0.06);
transform: rotate(15deg);
}
.veus-theme-toggle__icon {
position: absolute;
inset: 0;
margin: auto;
width: 18px;
height: 18px;
transition: opacity .25s ease, transform .35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.veus-theme-toggle__icon--sun { opacity: 1; transform: rotate(0); }
.veus-theme-toggle__icon--moon { opacity: 0; transform: rotate(-90deg); }
[data-theme="light"] .veus-theme-toggle {
border-color: var(--veus-ink-500);
color: var(--veus-text-soft);
background: rgba(28, 30, 36, 0.03);
}
[data-theme="light"] .veus-theme-toggle:hover {
color: var(--veus-yellow-deep);
border-color: var(--veus-yellow-deep);
background: rgba(255, 179, 22, 0.10);
}
[data-theme="light"] .veus-theme-toggle__icon--sun { opacity: 0; transform: rotate(90deg); }
[data-theme="light"] .veus-theme-toggle__icon--moon { opacity: 1; transform: rotate(0); }
/* Sem JS, o toggle não tem handler (theme-toggle.js nunca roda) — esconde
o botão morto. theme-boot.js remove `veus-no-js` do assim que
executa; logo, este seletor só vige em browser com JS desabilitado.
Paridade com Call (theme-light.css). */
:where(.veus-no-js) .veus-theme-toggle { display: none; }
/* ====================================================================
* (11) Utilitário visually-hidden (WCAG screen-reader-only)
* ==================================================================== */
.veus-u-visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0);
white-space: nowrap; border: 0;
}
/* ====================================================================
* (12) Reduced motion — neutraliza rotate hover etc.
* ==================================================================== */
@media (prefers-reduced-motion: reduce) {
.veus-theme-toggle:hover { transform: none; }
.veus-theme-toggle__icon { transition: opacity 0.01ms !important; transform: none !important; }
}