/* ========================================================================== História Cantada — tokens de design Fonte única de cor, tipografia, espaço, raio e sombra. Mudar aqui muda o site inteiro. ========================================================================== */ :root { --color-bg: #FAF7F1; --color-bg-soft: #EFE8DC; --color-surface: #FFFDF9; --color-ink: #1F2326; --color-muted: #6D6A64; --color-primary: #243B3A; --color-primary-soft: #3F5F5C; --color-accent: #C99A3E; --color-accent-soft: #E9D4A4; --color-border: #E3D8C7; --color-shadow: rgba(36, 59, 58, 0.12); /* --- superfícies ------------------------------------------------------ */ --bg: #FAF7F1; /* creme claro, elegante sem pesar */ /* Faixa alternada. Era #EEF3EA, que dava 1.05:1 contra --bg — abaixo do limiar de percepção, então a alternância de seções não existia para ninguém. */ --bg-warm: #EFE8DC; --surface: #FFFDF9; /* cards */ --border: #E3D8C7; /* separador DECORATIVO: filete, régua, divisória */ /* Borda de elemento INTERATIVO (campo, opção não marcada, chip de filtro, botão de contorno, card clicável). Precisa de 3:1 contra o fundo: é ela que diz onde o controle começa e termina, e a WCAG 1.4.11 cobra isso. Mede 5.39:1 sobre --surface, 4.91:1 sobre --bg e 4.44:1 sobre --bg-warm. Usar --border num controle é o erro que essa dupla existe para evitar. */ --border-strong: #6D6A64; /* --- texto ------------------------------------------------------------ */ --ink: #1F2326; /* texto principal */ --ink-muted: #6D6A64; /* texto secundário */ --ink-invert: #FFFFFF; /* Texto sobre vinho. Puxado do próprio matiz em vez de cinza, para não abrir um buraco neutro no meio da cor. 10.63:1 e 8.19:1 sobre --wine. */ --ink-on-wine: #FAF7F1; --ink-on-wine-muted: rgba(250, 247, 241, .72); /* --- dourado: dois papéis distintos ----------------------------------- --gold -> PREENCHIMENTO (botão, barra) e ANEL DE FOCO sobre fundo escuro. 2.87:1 sobre --bg, então nunca carrega texto nem borda sobre papel; sobre azul noite vai a 5.09:1, onde passa a ser o tom legível. --gold-ink -> TEXTO e BORDAS de acento sobre papel. 14.62:1 sobre --bg, 16.03:1 sobre --surface. Some sobre azul noite (1:1): lá o anel de foco é --gold. --gold-titulo -> a única forma de escrever em dourado sobre papel e ainda ser legível. 3.70:1 sobre --bg: passa o critério de TEXTO GRANDE (3:1), então serve para headline e nada menor. --gold sobre papel daria 2.51:1 e reprovaria até isso. ---------------------------------------------------------------------- */ --gold: #C99A3E; --gold-strong: #D7AE59; /* hover/acento */ --gold-ink: #243B3A; --gold-soft: #E9D4A4; /* selo e detalhe de conquista */ --gold-titulo: #A97B22; /* dourado legível, só em texto grande */ /* O dourado de texto PEQUENO. O --gold-titulo faz 3,54:1 sobre o creme, e isso basta para os 3:1 que a WCAG pede a texto grande. O selo da dobra tem 12px, precisa de 4,5:1, e reprovaria com ele. Este faz 5,17:1. */ --gold-selo: #8A6114; /* O topo da piscada do botao da dobra. A tinta #1F2326 faz 7,60:1 sobre o --gold-strong e 9,14:1 sobre este, entao clarear so melhora a leitura e nao existe instante da animacao em que o texto fique dificil. */ --gold-pico: #E6C06D; /* --- semânticos ------------------------------------------------------- Os dois estados que antes dividiam o mesmo verde e diziam coisas diferentes: --green-soft é ESCOLHIDO, --wine-soft é TOCANDO. */ --green: #243B3A; /* ação, Pix, segurança, WhatsApp */ --green-soft: #E7EFEC; --green-hover: #182C2B; --wine: #243B3A; /* emoção, música, player */ --wine-deep: #182C2B; --wine-soft: #E9D4A4; /* faixa de "tocando" sobre papel */ --danger: #A7352B; /* Sem uso hoje. Fica porque --danger sem o par claro deixa a próxima mensagem de erro sem fundo, e aí alguém inventa um hex na hora. */ --danger-soft: #FBEAE5; /* --- tipografia ------------------------------------------------------- */ --font-display: 'Fraunces', Georgia, serif; --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --text-xs: 0.8125rem; /* 13px — rótulos, eyebrow */ --text-sm: 0.875rem; /* 14px — apoio */ --text-base: 1rem; /* 16px — corpo (mínimo absoluto) */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.625rem; /* 26px */ --text-3xl: 2rem; /* 32px */ --leading-tight: 1.2; --leading-body: 1.65; /* --- espaçamento: escala de 4px --------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; /* usado por .card e .nav-cta; existia só como fallback */ --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem; --sp-16: 4rem; /* --- raios ------------------------------------------------------------ */ --radius-field: 14px; --radius-card: 18px; --radius-pill: 999px; /* --- sombras ---------------------------------------------------------- */ --shadow-card: 0 18px 45px var(--color-shadow); --shadow-lift: 0 24px 60px rgba(36, 59, 58, .14); --shadow-float: 0 14px 30px rgba(36, 59, 58, .18); /* --- layout ----------------------------------------------------------- */ --container-wide: 1120px; /* landing */ --container-funnel: 520px; /* formulário em diante */ /* --- movimento -------------------------------------------------------- */ --ease-enter: cubic-bezier(0, 0, .2, 1); /* ease-out */ --ease-exit: cubic-bezier(.4, 0, 1, 1); /* ease-in — sem uso: nada no site anima na saída ainda */ --dur-fast: 150ms; --dur-base: 220ms; --dur-slow: 300ms; /* --- camadas ---------------------------------------------------------- */ --z-header: 40; --z-float: 60; --z-overlay: 100; } /* Tamanhos maiores a partir de tablet. Só os títulos crescem — o corpo permanece em 16px porque já é o tamanho confortável de leitura. --text-xl entra aqui porque antes não entrava: a escala do desktop ficava 48 / 36 / 20 / 16, com um salto de 1,8x entre h2 e h3 e de apenas 1,25x entre h3 e o corpo. Título de card e texto de card mal se distinguiam. */ @media (min-width: 768px) { :root { --text-xl: 1.375rem; /* 22px */ --text-2xl: 2.25rem; /* 36px */ --text-3xl: 3rem; /* 48px */ } }