/* ============================================================ BOOKATOON — Design Tokens Paleta ancorada no Manual de Marca (GDD jul/2026) Etapa 1 da migração de @layer (docs/layer-proposal.md) — só esta camada por enquanto. A ordem abaixo declara o destino final das próximas etapas mesmo que os arquivos ainda não estejam envolvidos em @layer; até lá, "base"/"components"/"sections" continuam se comportando exatamente como hoje (cascata por ordem de import). ⚠️ Camadas declaradas depois vencem as de antes, INDEPENDENTE de especificidade (uma regra ".x" em "sections" sempre vence uma regra ".x.y.z" em "base"). Não reordene esta lista sem conferir css/personagens.css: o fix que impede o "salto lateral" dos cards de personagem na revelação por scroll (.motion-on .personagem[data-reveal]) só funciona porque "sections" vem depois de "base" aqui. Além disso, CSS fora de qualquer @layer (hoje: css/refinement.css, de propósito) sempre vence QUALQUER regra em camada — cuidado ao adicionar transform/translate em [data-reveal] ou .personagem por lá. ============================================================ */ @layer tokens, base, components, sections, overrides; @layer tokens { :root { /* ---- Cores de marca ---- */ --roxo-profundo: #481787; /* primária: estrutura, confiança */ --roxo-ink: #2b1152; /* variação escura p/ fundos profundos */ --violeta: #7d3cff; /* energia, movimento, destaques */ --coral: #ff5e7e; /* energia emocional, chamadas */ --coral-escuro: #d63a5c; /* coral acessível p/ texto pequeno */ --ambar: #ffc107; /* validação, luz, suporte */ --ambar-suave: #ffe9a8; --creme: #fff4d6; /* acolhimento, fundo ameno */ --creme-claro: #fffaf0; /* respiro */ --branco: #fffdf8; /* ---- Cores de apoio (extensão seccional) ---- */ --ceu: #4aa8f0; --ceu-claro: #d9edff; --ceu-nevoa: #eef8ff; --lima: #a9e85b; --lima-escuro: #4f8a12; /* ---- Canais RGB para uso em rgba()/gradientes com alpha variável ---- */ --ambar-rgb: 255, 193, 7; --ceu-rgb: 74, 168, 240; --violeta-rgb: 125, 60, 255; --coral-rgb: 255, 94, 126; --roxo-profundo-rgb: 72, 23, 135; --branco-rgb: 255, 253, 248; --ink-rgb: 36, 21, 51; /* ---- Tinta ---- */ --ink: #241533; /* texto principal, contornos */ --ink-suave: #4a3a5c; /* texto secundário sobre claro */ --papel-sobre-escuro: #f4ecff; /* texto sobre roxo */ /* ---- Semânticos ---- */ --bg-page: var(--creme-claro); --text-body: var(--ink); --text-muted: var(--ink-suave); --focus-ring: var(--violeta); --focus-ring-on-dark: var(--ambar); /* sobre --roxo-profundo/--roxo-ink, --violeta cai a ~2,3:1 */ --erro: #d23f3f; --erro-bg: #fff2f2; --sucesso: #2e8b46; /* ---- Texto sobre fundos escuros (--roxo-profundo/--roxo-ink/--violeta/--ink) ---- Cada token abaixo preserva o valor já em uso — não são um recolhimento de tons, só o mesmo literal com nome. #cdb9f2/#d8c9f5 são quase o mesmo tom (candidatos a unificação numa futura revisão de arte, não decidido aqui); mantidos distintos para não alterar nada visualmente agora. */ --text-muted-on-dark: #cdb9f2; /* .jornada .section-lead, .organizacoes, .pitch-secao--roxa */ --text-muted-on-dark-alt: #d8c9f5; /* .passo p — mesmo papel, tom levemente diferente */ --text-lead-on-violeta: #eadcff; /* .coro__lead, sobre --violeta */ --text-muted-on-ink: #efe6f7; /* .site-footer, sobre --ink */ --text-muted-on-ink-2: #c3b4d4; /* .footer__sobre p, .footer__base, sobre --ink */ /* ============================================================ FASE 4B — PILOTO de contratos semânticos orientados por função (docs/design-system-audit.md §10). Camada aditiva: nenhum token acima foi removido ou teve seu valor alterado. Aplicada por ora só a 6 componentes-piloto: .jornada__regra, .impacto__aviso, .btn, .chip (variantes sobre fundo escuro), .relato (card claro) e .universo__item em .pitch-secao--roxa (card escuro). Todo token "on-*"/"muted-on-*"/"border-on-*" só existe para uma superfície que algum componente real usa hoje — nada aqui é especulativo. ============================================================ */ /* Superfícies — cada uma é o fundo real de pelo menos 1 seção/card. */ --surface-page: var(--bg-page); /* fundo padrão da página */ --surface-card: var(--branco); /* .relato, .universo__item, .porta, .chip */ --surface-card-warm: var(--creme); /* .dado, .pitch-consequencia — card "aconchegante", tom diferente de --surface-card por design, não por acidente */ --surface-brand: var(--violeta); /* .coro */ --surface-deep: var(--roxo-profundo); /* .jornada, .organizacoes, .pitch-secao--roxa (seção) */ --surface-deep-card: var(--roxo-ink); /* .jornada__regra, .abertura__pular, chips/cards DENTRO de uma superfície --surface-deep — não é a mesma cor da seção, é o "cartão" um tom mais escuro por cima dela */ --surface-highlight: var(--ambar-suave); /* .impacto__aviso */ --surface-warning: var(--erro-bg); /* .form-resumo, campo inválido */ --surface-intro-organic: radial-gradient(circle at 92% 18%, rgba(var(--coral-rgb), 0.12) 0 10rem, transparent 10.15rem), radial-gradient(circle at 8% 84%, rgba(var(--ceu-rgb), 0.16) 0 12rem, transparent 12.15rem), linear-gradient(145deg, var(--branco) 0%, var(--creme) 100%); --surface-supports-organic: radial-gradient(circle at 92% 12%, rgba(var(--violeta-rgb), 0.12) 0 11rem, transparent 11.15rem), linear-gradient(145deg, var(--ceu-nevoa) 0%, var(--ceu-claro) 100%); /* "on-*" — cor de texto principal para quem está sobre aquela superfície. */ --on-page: var(--text-body); --on-card: var(--ink); --on-brand: var(--branco); --on-deep: var(--papel-sobre-escuro); --on-highlight: var(--ink); --on-warning: var(--ink); --on-coral: #3d0715; /* só .btn--coral; valor preservado exatamente — não é --ink, foi escolhido mais escuro que --ink propositalmente para reforçar contraste sobre --coral */ --muted-on-page: var(--text-muted); --muted-on-brand: var(--text-lead-on-violeta); --muted-on-deep: var(--text-muted-on-dark); --border-on-page: var(--ink); --border-subtle: rgba(var(--ink-rgb), 0.12); --border-on-brand: var(--branco); --border-on-deep: var(--violeta); /* .jornada__regra, .universo__item em superfície --surface-deep */ --border-on-highlight: var(--ink); /* Reservados, ainda não consumidos por nenhuma regra: os ícones do site são SVG inline com stroke/fill literais (não currentColor), então não há hoje uma propriedade CSS de cor de ícone para redirecionar a um token sem also converter os SVGs — fora do escopo deste piloto. */ --icon-on-page: var(--ink); --icon-on-brand: var(--branco); /* ---- Tipografia ---- */ --font-display: "Fredoka", "Baloo 2", system-ui, sans-serif; --font-body: "Nunito", "Segoe UI", system-ui, sans-serif; --fs-hero: clamp(3rem, 9vw, 8.5rem); --fs-section: clamp(2.25rem, 5.5vw, 5.25rem); --fs-destaque: clamp(1.5rem, 3vw, 3rem); --fs-lead: clamp(1.125rem, 1.6vw, 1.375rem); --fs-body: clamp(1rem, 1.2vw, 1.1875rem); --fs-small: 0.9375rem; --lh-body: 1.65; --lh-display: 1.02; --measure: 62ch; /* ---- Espaçamento (base 8px) ---- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; --content-action-gap: clamp(var(--sp-6), 3vw, var(--sp-7)); --section-pad: clamp(4rem, 10vw, 8.5rem); /* ---- Raios ---- */ --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-xl: 44px; --r-pill: 999px; --r-blob: 58% 42% 55% 45% / 52% 55% 45% 48%; /* ---- Bordas & sombras gráficas ---- */ --stroke: 3px; --stroke-thick: 4px; --shadow-sticker: 0.35rem 0.4rem 0 rgba(36, 21, 51, 0.16); --shadow-pop: 0.45rem 0.55rem 0 var(--roxo-profundo); --shadow-soft: 0 14px 34px -18px rgba(36, 21, 51, 0.35); /* ---- Z-index (mapa completo da página) ---- 0 decor formas de cenário e ornamentos 1 content conteúdo das seções 39 textura papel global (body::after) 60 header barra de navegação sticky 70 menu overlay do menu mobile 75 player disco de vinil (abaixo do painel de conforto) 80 panel painel de conforto + botão 100 skip skip link */ --z-decor: 0; --z-content: 1; --z-header: 60; --z-menu: 70; --z-player: 75; --z-panel: 80; --z-skip: 100; /* ---- Motion (hierarquia em 3 níveis) ---- Nível 1 · narrativo: hero, personagens, jornada, arquipélago, coro → --dur-entrada / --dur-grande Nível 2 · feedback: hover, focus, active, menu, formulário, player → --dur-fast / --dur-micro Nível 3 · ambiente: respiração, blink, deriva (4–10 s, pausável) → durações longas definidas em cada keyframe Regra: no máximo 2 loops perceptíveis por viewport. */ --ease-energy: cubic-bezier(0.22, 1, 0.36, 1); --ease-suave: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 150ms; --dur-micro: 230ms; --dur-entrada: 550ms; --dur-grande: 850ms; --stagger: 70ms; /* ---- Toques ---- */ --tap-min: 44px; /* ---- Capítulo de origem ---- */ --origin-section-background: radial-gradient(circle at 8% 18%, rgba(var(--violeta-rgb), 0.13) 0 9rem, transparent 9.15rem), radial-gradient(circle at 92% 14%, rgba(var(--coral-rgb), 0.14) 0 13rem, transparent 13.15rem), linear-gradient(135deg, var(--creme) 0%, var(--branco) 46%, rgba(var(--violeta-rgb), 0.08) 100%); --origin-trail-art: url("../assets/img/trilha-musical-organica.png") center / contain no-repeat; /* ---- Capítulo das etapas integradas ---- */ --stages-section-background: radial-gradient(circle at 88% 20%, rgba(var(--ceu-rgb), 0.28) 0 13rem, transparent 13.15rem), radial-gradient(circle at 8% 86%, rgba(var(--coral-rgb), 0.13) 0 11rem, transparent 11.15rem), linear-gradient(135deg, var(--ceu-claro) 0%, var(--ceu-nevoa) 56%, rgba(var(--violeta-rgb), 0.13) 100%); --stages-trail-art: url("../assets/img/trilha-musical-organica.png") center / contain no-repeat; /* ---- Ícones desenhados reutilizáveis ---- Seta de transição entre etapas (círculo âmbar + contorno de tinta, mesmo traço dos outros ícones do site) — usada em .fluxo-operacional e .governance-cycle no lugar do glifo de texto "→" sem contorno. */ --icon-seta-etapa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='21' fill='%23FFC107' stroke='%23241533' stroke-width='3'/%3E%3Cpath d='M16 24h16M23 17l7 7-7 7' fill='none' stroke='%23241533' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; /* ---- Cursor ilustrado ---- Mesmo par (seta + mãozinha), mesmo tamanho (~58px de altura), mesmo contorno preto. Centralizado aqui pra nunca precisar repetir a URL/hotspot em cada regra "cursor: pointer" do site. */ --cursor-default: url("../assets/img/cursor/cursor-bookatoon.png") 6 3, auto; --cursor-hand: url("../assets/img/cursor/cursor-hand-bookatoon.png") 4 0, pointer; /* ---- Breakpoints (referência, NÃO variáveis funcionais) ---- CSS custom properties não funcionam dentro de @media (min-width: ...) em CSS puro — não existe "var(--bp-md)" que o navegador aceite ali, só com um pré-processador (Sass) ou @custom-media (rascunho do spec, sem suporte nativo em navegador) — e este projeto é propositalmente sem build step. Este bloco é só a lista canônica dos valores já em uso, pra quem for escrever uma media query nova copiar um destes em vez de inventar um valor próximo. Confirmado nesta sessão que só estes 6 valores aparecem hoje no CSS: 40rem → :root[data-big-text] adjacent components / navegação mobile↔desktop mais estreita 48rem → grids de 2 colunas (ex.: .impacto__grid, .contato__grid em telas médias) 56rem → o breakpoint mais comum do site — troca mobile↔desktop do header, a maioria dos grids de seção 60rem → grids de 2 colunas mais largos (.contato__grid) 64rem → grids de 4 colunas (.impacto__grid) 70rem → adicionado fora desta sessão (refinement.css/style-guide.css) Convenção de par min/max: sempre "min-width: Xrem" com "max-width: (X - 0.01)rem" do lado estreito (ex.: 56rem/55.99rem), nunca o mesmo valor nos dois lados — evita disparar os dois ao mesmo tempo exatamente no limite. */ } /* Preferência do usuário: texto maior (painel de conforto) */ :root[data-big-text="true"] { --fs-body: clamp(1.15rem, 1.5vw, 1.375rem); --fs-lead: clamp(1.3rem, 1.9vw, 1.6rem); --fs-small: 1.0625rem; --lh-body: 1.75; } /* Alto contraste (painel de conforto) */ :root[data-high-contrast="true"] { --ink: #140a1f; --ink-suave: #241533; --bg-page: #ffffff; --creme: #ffffff; --creme-claro: #ffffff; --ambar-suave: #ffefc2; --shadow-sticker: 0.35rem 0.4rem 0 rgba(20, 10, 31, 0.5); } /* [data-surface="deep"] — PILOTO controlado (só .organizacoes em index.html por ora; ver docs/design-system-audit.md). Redefine os tokens de camada 2 pra contexto escuro no escopo de uma seção, em vez de cada componente duplicar a mesma correspondência de cor via seletor de contexto (".organizacoes .chip" etc.). Mesmos valores que --surface-deep-card/--on-deep/--muted-on-deep/--border-on-deep já documentavam — nenhuma cor nova, só troca ONDE a cor é decidida. */ [data-surface="deep"] { --surface-card: var(--surface-deep-card); --on-card: var(--on-deep); --muted-on-page: var(--muted-on-deep); --border-on-page: var(--border-on-deep); } /* Escape-hatch do piloto: .dado, .pitch-consequencia, .porta e .relato são propositalmente cards claros/mornos que flutuam sobre um fundo escuro — não reagem ao contexto da seção (mesmo princípio de .jornada__regra/.impacto__aviso, que também ignoram o entorno). Sem isto, herdariam o retinte genérico acima: .dado__label (usa --on-card) ficaria com texto claro sobre o fundo creme do próprio .dado — quase ilegível; .pitch-consequencia (mesmo problema, fundo --surface-card-warm continua morno mas borda/texto mudariam). */ [data-surface="deep"] .dado, [data-surface="deep"] .pitch-consequencia, [data-surface="deep"] .porta, [data-surface="deep"] .relato, [data-surface="deep"] .quadro { --surface-card: var(--branco); --on-card: var(--ink); --muted-on-page: var(--text-muted); --border-on-page: var(--ink); } } /* fim de @layer tokens */