/* ============================================================================ Duas de Vila — Design Tokens ---------------------------------------------------------------------------- Cópia local (site é publicado como projeto independente no Netlify, então não pode depender de "../assets" fora da pasta site/). Fonte de verdade fica em assets/css/tokens.css na raiz do projeto — replique manualmente qualquer mudança de token nos dois arquivos. Reconciliação de marca: - Rosa Chiclete (#FF7EB6) é a cor-herói EMOCIONAL (preenchimentos, acentos). - Rosa Profundo (#A3346A) é a versão ACESSÍVEL do rosa para texto e UI sobre fundo claro (contraste AA). - Amarelo Canário = calor / salgados. Verde Menta = tom de apoio frio. - Marrom Cacau = texto (alternativa orgânica ao preto puro). ========================================================================== */ :root { /* ---- Cores quentes principais ---- */ --rosa-chiclete: #ff7eb6; /* RGB 255 126 182 — doces, herói */ --rosa-profundo: #a3346a; /* RGB 163 52 106 — rosa acessível p/ texto/UI */ --rosa-escuro: #780d48; /* RGB 120 13 72 — texto sobre rosa-chiclete */ --amarelo: #ffc145; /* RGB 255 193 69 — salgados, calor */ --amarelo-escuro:#7c5800; /* RGB 124 88 0 — texto sobre amarelo */ --bege: #fef8f1; /* RGB 254 248 241 — fundo baunilha */ /* ---- Tons de apoio (contraste) ---- */ --cacau: #4a2c2a; /* RGB 74 44 42 — texto principal */ --menta: #6bbfbf; /* RGB 107 191 191 — acento frio */ --menta-escuro: #00696a; /* versão acessível do menta p/ texto */ /* ---- Superfícies (camadas tonais) ---- */ --surface: #fef8f1; /* fundo geral */ --surface-card: #ffffff; /* cartões "levantados da mesa" */ --surface-muted: #f7efe6; /* blocos sutis */ --surface-sunk: #f2e7dc; /* poços / code chips */ /* ---- Texto ---- */ --text: #2c1b1a; /* títulos / alto contraste */ --text-body: #5b4b48; /* corpo */ --text-soft: #8a726f; /* legendas / metadados */ --on-pink: #ffffff; /* texto sobre rosa profundo */ --on-yellow: #4a2c2a; /* texto sobre amarelo */ /* ---- Linhas e sombras ---- */ --outline: #ead9de; /* bordas suaves */ --outline-soft: #f0e3e7; --shadow-sm: 0 4px 16px -6px rgba(74, 44, 42, .12); --shadow-md: 0 12px 32px -12px rgba(163, 52, 106, .18); --shadow-lg: 0 24px 60px -20px rgba(163, 52, 106, .22); /* ---- Feedback (do/don't) ---- */ --ok: #1f8a53; --ok-bg: #eafaf1; --ok-line: #bfe9d1; --no: #ba1a1a; --no-bg: #fdecec; --no-line: #f6c9c9; /* ---- Tipografia ---- */ --font-head: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif; /* Escala fluida (clamp: mobile → desktop) */ --fs-hero: clamp(2.75rem, 1.6rem + 5.2vw, 5rem); --fs-h1: clamp(2rem, 1.4rem + 2.6vw, 3rem); --fs-h2: clamp(1.5rem, 1.2rem + 1.3vw, 2rem); --fs-h3: clamp(1.15rem, 1.05rem + .5vw, 1.375rem); --fs-lead: clamp(1.05rem, 1rem + .35vw, 1.25rem); --fs-body: 1rem; --fs-sm: .875rem; --fs-xs: .75rem; /* ---- Espaçamento (ritmo base 8px) ---- */ --sp-xs: 4px; --sp-sm: 12px; --sp-md: 24px; --sp-lg: 48px; --sp-xl: 80px; --sp-section: clamp(3.5rem, 2.5rem + 4vw, 7rem); /* ---- Raios (linguagem arredondada) ---- */ --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-full: 9999px; /* ---- Layout ---- */ --sidebar-w: 264px; --content-max: 1120px; /* ---- Movimento ---- */ --dur: 220ms; --ease: cubic-bezier(.16, 1, .3, 1); } /* --------------------------------------------------------------------------- Modo escuro "quente" — mantém o aconchego, nunca vira preto industrial. Ativado por data-theme="dark" no (toggle via JS). ------------------------------------------------------------------------- */ :root[data-theme="dark"] { --bege: #241c1b; --surface: #201817; --surface-card: #2b201f; --surface-muted: #2f2422; --surface-sunk: #372a28; --text: #f8ede4; --text-body: #e4d3cb; --text-soft: #bda69f; --rosa-profundo: #ffb0cd; /* rosa claro é o acessível no escuro */ --rosa-escuro: #3e0022; --on-pink: #3e0022; --amarelo-escuro:#ffdea8; --menta-escuro: #81d4d4; --outline: #4a3a37; --outline-soft: #3b2d2b; --shadow-sm: 0 4px 16px -6px rgba(0, 0, 0, .5); --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, .55); --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .6); --ok-bg: #12291d; --ok-line:#1f4632; --no-bg: #331717; --no-line:#5a2626; } /* Respeita quem pediu menos movimento no sistema. */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }