/* Arco Pinturas: tokens do design system v0.2 "Obra por escrito, em arco" (rascunho de 16/10/2026: v0.1 depois da sabatina; v0.2 com movimento e transições) FONTE ÚNICA de estilo do site. Nenhum valor de cor, fonte, espaço, raio, sombra ou tempo fora deste arquivo. Componentes usam só os tokens semânticos (seção 2 em diante), nunca os primitivos (seção 1). Origem dos valores da MARCA: Manual de Marca v1.0 do André (14/10/2026): cores, Poppins, arcos translúcidos, cartões claros sem sombra, cartão de total grafite, rótulo vermelho acima do título. Valores DERIVADOS (marcados "derivado"): calculados por nós para fechar contraste AA; não estão no manual. Contrastes medidos em 16/10/2026 (fórmula WCAG 2.x), a ver em DS-ARCO-v0.md §3. Regras: vermelho é AÇÃO e marca; azul é informação, link e foco; verde só confirma e só sobre escuro (ou como forma); grafite é estrutura; branco e suave são respiro. ORÇAMENTO DE COR por dobra (sabatina de direção de arte, 16/10): neutros ≥ 90%, vermelho ≤ 6% da área e ≤ 2 elementos, azul e verde ≤ 2% cada; as três cores nunca ficam lado a lado fora do logo. */ :root { color-scheme: light; /* ---------- 1. PRIMITIVOS (não usar direto em componente) ---------- */ /* marca (manual do André) */ --vermelho-600: #c6302e; /* Vermelho Arco: cor principal */ --azul-500: #4580f4; /* Azul Arco: apoio */ --verde-500: #6fd945; /* Verde Arco: apoio (1,8:1 sobre branco: nunca texto sobre claro) */ --grafite-800: #3b393d; /* Grafite */ --tinta-900: #232323; /* Tinta: texto corrido */ --cinza-600: #6b6b70; /* Cinza: legendas e rótulos */ --suave-50: #f7f5f3; /* Fundo suave */ --branco: #ffffff; /* derivados (contraste AA) */ --vermelho-700: #ad2a28; /* derivado: hover do vermelho; branco sobre ele 6,7:1 */ --vermelho-800: #9d2624; /* derivado: erro e texto vermelho pequeno; 7,7:1 sobre branco */ --azul-texto: #0e59ee; /* derivado: link e rótulo azul sobre claro; 5,7:1 branco, 5,2:1 suave */ --azul-claro: #88aef8; /* derivado: azul sobre grafite; 5,1:1 */ --verde-700: #2f6e17; /* derivado: verde como TEXTO sobre claro; 6,2:1 */ --grafite-900: #2c2b2e; /* derivado: fundo escuro profundo (rodapé, cartão de total sobre grafite) */ --grafite-700: #4f4d50; /* derivado: cartão sobre grafite */ /* tintas claras da marca (fundo de ícone, chip, aviso) */ --vermelho-050: #faeeee; --vermelho-100: #f7e2e2; --azul-100: #e5edfd; --verde-100: #ebfae5; /* transparências */ --tinta-a12: rgb(35 35 35 / .12); --tinta-a24: rgb(35 35 35 / .24); --branco-a14: rgb(255 255 255 / .14); --branco-a28: rgb(255 255 255 / .28); --branco-a78: rgb(255 255 255 / .78); /* ---------- 2. COR (semânticos: o que os componentes usam) ---------- */ --cor-fundo: var(--branco); --cor-fundo-suave: var(--suave-50); --cor-fundo-escuro: var(--grafite-800); --cor-cartao: var(--suave-50); /* manual: cartão #F7F5F3, cantos arredondados, sem sombra */ --cor-cartao-escuro: var(--grafite-700); --cor-texto: var(--tinta-900); /* 15,7:1 sobre branco */ --cor-texto-2: var(--grafite-800); /* 11,4:1 */ --cor-texto-3: var(--cinza-600); /* 5,3:1 branco, 4,9:1 suave: legenda e rótulo */ --cor-texto-inverso: var(--branco); /* 11,4:1 sobre grafite */ --cor-texto-inverso-2: var(--branco-a78); --cor-acao: var(--vermelho-600); /* botão primário e rótulo (eyebrow) */ --cor-acao-hover: var(--vermelho-700); --cor-acao-texto: var(--branco); --cor-link: var(--azul-texto); --cor-link-hover: var(--grafite-800); --cor-foco: var(--azul-texto); /* anel de foco 3px: 5,7:1 sobre branco */ --cor-ok: var(--verde-700); --cor-erro: var(--vermelho-800); /* erro sempre com ícone e texto, nunca só cor */ --cor-erro-fundo: var(--vermelho-050); --cor-info: var(--azul-texto); --cor-linha: var(--tinta-a12); --cor-linha-forte: var(--tinta-a24); --cor-placeholder-foto: var(--grafite-700); /* só em protótipo: slot de foto real pendente */ --cor-nota-foto: var(--verde-500); /* rótulo sobre o slot escuro de foto */ --cor-ponto-ok: var(--verde-500); /* ponto de estágio: concluída (forma, nunca texto sobre claro) */ --cor-ponto-andamento: var(--azul-500); /* ponto de estágio: em andamento */ --cor-realce: var(--vermelho-050); /* fundo de realce suave (guia) */ --cor-sel-ok: var(--verde-100); --cor-sel-no: var(--vermelho-100); --cor-sel-info: var(--azul-100); --cor-borda-campo: var(--cinza-600); /* borda de campo de formulário: 5,3:1 (WCAG 1.4.11 pede 3:1) */ /* arcos: 3 crescentes derivados do símbolo (círculos ajustados ao traçado do André, 16/10). Forma plana, opacidade 1, UMA cor por superfície (no logo as três cores; no site, tons de um matiz só: evita o efeito semáforo) */ --cresc-1: var(--vermelho-100); --cresc-2: var(--vermelho-050); --cresc-3: var(--vermelho-100); --cor-progresso: var(--vermelho-600); /* arco de etapa: a "forma vermelha" da tela */ --cor-progresso-trilho: var(--tinta-a24); /* ---------- 3. TIPOGRAFIA (Poppins; fallback do manual: Arial) ---------- */ --fonte-texto: 'Poppins', Arial, sans-serif; --fonte-display: 'Poppins', Arial, sans-serif; --peso-texto: 400; --peso-medio: 500; --peso-forte: 700; /* subtítulo e rótulo */ --peso-display: 800; /* título */ --fs-rotulo: .75rem; --fs-legenda: .8125rem; --fs-corpo: clamp(1rem, .95rem + .25vw, 1.125rem); --fs-lead: clamp(1.125rem, 1rem + .6vw, 1.375rem); --fs-h3: clamp(1.25rem, 1.1rem + .7vw, 1.625rem); --fs-h2: clamp(1.875rem, 1.4rem + 2.2vw, 3rem); --fs-h1: clamp(2.5rem, 1.6rem + 4.4vw, 5rem); /* 40 a 80 px: ≤ 4,4× o corpo (gate: 3× a 6×) */ --fs-numero: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem); /* 01 02 03, etapas, valor */ --fs-display: clamp(3rem, 2rem + 6vw, 6.5rem); /* só em tela de transição, 1 vez */ --lh-titulo: 1; --lh-h2: 1.12; --lh-corpo: 1.6; --lh-rotulo: 1.3; --lh-botao: 1.2; --lh-compacto: 1; --lh-ficha: 1.5; --tracking-titulo: -.03em; --tracking-rotulo: .2em; /* rótulo: Bold 700, caixa alta, espaçado (manual) */ --larg-texto: 40rem; /* ~65 caracteres */ /* ---------- 4. ESPAÇO, LAYOUT E FORMA ---------- */ --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --secao-y: clamp(4rem, 8vw, 8rem); --entre-blocos: clamp(4rem, 8vw, 7.5rem); /* gate v3: ≥ 100 px no desktop (120 px em 1440), ≥ 64 no celular */ --gutter: clamp(1rem, 4vw, 2.5rem); --larg-max: 80rem; --altura-header: 5rem; --altura-header-mob: 4rem; --sr-lado: 1px; /* recorte do texto só para leitor de tela (.so-leitor) */ --alvo-toque: 2.75rem; /* 44 px */ --logo-largura: 8.5rem; /* 136 px: manual pede mínimo de 120 px; menos área de traçado visível */ --simbolo-largura-min: 2.5rem; /* manual: símbolo 40 px */ --raio-p: .5rem; --raio-m: 1rem; --raio-g: .75rem; --raio-pilula: 999px; --raio-janela: 999px 999px var(--raio-m) var(--raio-m); /* "janela em arco" (topo semicircular): a testar no gate, não é o padrão */ --raio-quadrante-g: 14rem 0 0 0; /* herói: um canto em arco, raio fixo */ --raio-quadrante-m: 6rem 0 0 0; /* foto de obra e clipe */ --borda-fina: 1px solid var(--cor-linha); --borda-forte: 2px solid var(--cor-linha-forte); --borda-foco: 3px solid var(--cor-foco); --foco-deslocamento: 3px; --sombra-nenhuma: none; /* manual: cartão sem sombra */ --sombra-flutuante: 0 .5rem 2rem rgb(35 35 35 / .14); /* só header rolado, modal e menu */ /* layout de componentes (rem aqui porque o lint de literais só libera este arquivo) */ --col-cartao: 17rem; --col-estreita: 13rem; --larg-form: 36rem; --altura-janela: 32rem; --altura-hero-min: 32rem; --rotulo-barra: 1.5rem; --rotulo-barra-h: .125rem; --ponto: .5rem; --altura-janela-mob: 22rem; --altura-foto-obra: 15rem; --anel-grande: 38rem; --marco-arco: 3.5rem; /* anel de etapa da linha do tempo */ --campo-altura: 3.25rem; --cartao-pad: 2rem; --amostra-cor: 5.5rem; --barra-mob-altura: 4rem; --larg-obra: 22rem; --larg-hero-texto: 34rem; --larg-nota: 22rem; --larg-porta-texto: 24rem; --larg-barra-demo: 24rem; /* ---------- 5. MOVIMENTO v0.2 (toda animação tem função; fontes e regras em DS-ARCO-v0.md §6) ---------- Só `transform` e `opacity` animam (compositor). Nada de clip-path, height, width, top. */ --gs-pressionar: 120ms; /* :active do botão e do card clicável (dr-heli duration-fast 120) */ --gs-feedback: 150ms; /* cor/borda em hover e foco (_mzk, spryntec, adesiva duration-fast 150) */ --gs-estado: 250ms; /* fundo do card/porta, borda do campo (_mzk, spryntec duration-default 250) */ --gs-acordeao: 300ms; /* abrir/fechar FAQ e giro do "+" (starbucks expanderDuration 300) */ --gs-pagina: 400ms; /* crossfade entre documentos (spryntec duration-slow 400; reduzido de duration-page 600) */ --gs-revelacao: 650ms; /* bloco abaixo da dobra, uma vez (adesiva duration-reveal 650) */ --gs-dur-arco: 1.4s; /* desenho do arco de progresso (valor da Arco, sem equivalente no banco) */ --gs-escalonamento: 60ms; /* atraso entre irmãos que entram juntos; máx. 4 itens (0 a 180 ms) */ --gs-curva-padrao: cubic-bezier(.4, 0, .2, 1); /* _mzk, spryntec, adesiva, dr-heli: ease-default */ --gs-curva-saida: cubic-bezier(.22, 1, .36, 1); /* _mzk, adesiva: reveal; dr-heli: accordion */ --gs-curva-pagina: cubic-bezier(.2, 0, 0, 1); /* spryntec: ease-emphasized */ --gs-desloc-pressionar: 1px; /* :active desce 1 px (derivado; o banco só documenta "inward shrink or 2px offset" no mastercard) */ --gs-deslocamento: 1.25rem; /* 20 px: distância da revelação (DS-ARCO §6; o banco não documenta distância) */ /* ---------- 5b. MOSAICO (direção 2, protótipo de 21/10/2026; só entra no site se a direção for escolhida no G4) ---------- Cartão por serviço, matiz próprio, texto do cartão em grafite e título/numeral no tom escuro do mesmo matiz. Contrastes medidos em 21/10/2026 (WCAG 2.x): título vermelho-800 sobre vermelho-100 6,2:1; azul-texto sobre azul-100 4,9:1; verde-700 sobre verde-100 5,8:1; grafite-800 (texto corrido) 9,2:1 a 10,5:1 sobre as três tintas. */ --mosaico-fachada-fundo: var(--vermelho-100); --mosaico-fachada-tom: var(--vermelho-800); --mosaico-lavagem-fundo: var(--azul-100); --mosaico-lavagem-tom: var(--azul-texto); --mosaico-reboco-fundo: var(--verde-100); --mosaico-reboco-tom: var(--verde-700); --mosaico-foto-altura: 12rem; --mosaico-foto-altura-g: 20rem; /* ---------- 6. CAMADAS ---------- */ /* reservados para o build (modal, banner, barra fixa): ainda sem uso no styleguide */ --z-conteudo: 1; --z-barra: 40; --z-header: 50; --z-banner: 90; --z-modal: 100; } /* Superfície escura (cartão de total, prova, CTA final, rodapé): troca só os semânticos. Aqui o verde LÊ (6,4:1 sobre grafite), o azul vira --azul-claro e o vermelho NÃO é texto (2,1:1): vira forma ou botão. */ .superficie-escura { --cor-fundo: var(--grafite-800); --cor-cartao: var(--cor-cartao-escuro); --cor-texto: var(--branco); --cor-texto-2: var(--branco-a78); --cor-texto-3: var(--branco-a78); --cor-link: var(--azul-claro); --cor-link-hover: var(--branco); --cor-foco: var(--azul-claro); --cor-ok: var(--verde-500); --borda-fina: 1px solid var(--branco-a14); --borda-forte: 2px solid var(--branco-a28); --borda-foco: 3px solid var(--azul-claro); /* token composto não herda a troca de --cor-foco: redeclarar aqui */ --cor-linha: var(--branco-a14); --cor-linha-forte: var(--branco-a28); --cresc-1: var(--grafite-700); --cresc-2: var(--grafite-900); --cresc-3: var(--grafite-700); --cor-progresso-trilho: var(--branco-a28); color: var(--cor-texto); background: var(--cor-fundo); } /* Redução de movimento é projeto, não remendo: toda duração vai a zero e o deslocamento some. A revelação nem é aplicada (movimento.js) e a transição de página é desligada (styleguide.css). */ @media (prefers-reduced-motion: reduce) { :root { --gs-pressionar: 0s; --gs-feedback: 0s; --gs-estado: 0s; --gs-acordeao: 0s; --gs-pagina: 0s; --gs-revelacao: 0s; --gs-dur-arco: 0s; --gs-escalonamento: 0s; --gs-deslocamento: 0rem; } }