/* ============================================================= Psicóloga Lucy Felix: Vila Bocaina, Mauá, SP Design tokens. Ponto único de cor e de tipografia do site. Paleta da marca (hex literais do brief, não inventados): pergaminho #EDE6D8 fundo principal brasa #C0431F marca, botões, links brasa-funda #7A2A12 seções escuras, footer areia #E8D6BE acento legível sobre escuro ouro-velho #B08B3C acento de apoio, números tinta #241D16 texto principal tinta-suave #61564A texto secundário Todos os tokens dependentes abaixo foram recalculados a partir desses sete valores. O contraste de cada par texto/fundo em uso está anotado ao lado, mínimo AA 4.5:1 para texto de corpo. ============================================================= */ :root { /* ---------- Cor: literais da marca ---------- */ --pergaminho: #ede6d8; --brasa: #c0431f; --brasa-funda: #7a2a12; --areia: #e8d6be; --ouro-velho: #b08b3c; --tinta: #241d16; --tinta-suave: #61564a; /* ---------- Cor: superfícies ---------- */ --branco: #ffffff; /* cards, painéis claros */ --paper-soft: #f2ede4; /* placeholder de mídia, faixas discretas */ /* Brasa pura, usada como TEXTO (kicker, link, número) sobre --pergaminho, mede 4.13:1: reprova o corpo (mínimo 4.5:1). Rebaixada até aqui ela sobe a 5.35:1 e continua lendo como a mesma família rústica. Como preenchimento de botão (texto claro por cima) a --brasa crua já passa em 5.13:1: essa versão rebaixada serve só onde a cor da marca é o próprio texto. */ --brasa-texto: #a23a1b; /* 5.35:1 sobre --pergaminho */ --brasa-800: #8f3216; /* hover do botão escuro */ /* Ouro-velho puro mede 2.56:1 sobre --pergaminho e 3.05:1 sobre --brasa-funda: nenhum dos dois passa AA de corpo. Fica reservado a traço, borda, contador grande (t-stat) e preenchimento decorativo, nunca texto corrido pequeno. Para ícone e rótulo mono pequeno (seta de pill, número de passo, ícone de FAQ) existe a versão rebaixada abaixo. */ --ouro-velho-texto: #7a5f28; /* 4.84:1 sobre --pergaminho */ /* ---------- Cor: texto ---------- */ --ink: var(--tinta); /* texto principal: 13.4:1 sobre --pergaminho */ --ink-soft: var(--tinta-suave); /* texto secundário: 5.75:1 sobre --pergaminho (AA) */ /* ---------- Céu do hero (gradiente literal do brief) ---------- */ --sky-top: var(--brasa-funda); --sky-bottom: var(--areia); --sky-stop: 84.31%; /* Véu do hero, em --tinta. Mede a mesma função do que no exemplar: segurar o AA da faixa de leitura sem lavar o bando de pipas atrás do texto. */ --sky-veil: rgba(36, 29, 22, 0.58); /* ---------- Cor: semânticos ---------- */ --bg: var(--pergaminho); --surface: var(--branco); --fg: var(--ink); --fg-muted: var(--ink-soft); --fg-on-dark: var(--pergaminho); /* 7.81:1 sobre --brasa-funda */ --fg-on-dark-mu: rgba(237, 230, 216, 0.78); /* variante apagada, uso decorativo */ --border: rgba(36, 29, 22, 0.12); --border-strong: rgba(36, 29, 22, 0.22); --accent: var(--brasa); --dark-section: var(--brasa-funda); --inset-hairline: rgba(36, 29, 22, 0.06) 0 0 0 1px inset; /* ---------- Tipografia ---------- Sem serif e sem itálico neste site. Epilogue no display, Public Sans no corpo, Azeret Mono nos kickers e rótulos. A ênfase do display se faz por COR e PESO, nunca por inclinação. */ --font-display: 'Epilogue', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: 'Azeret Mono', ui-monospace, Menlo, monospace; --display-weight: 500; --display-emph-style: normal; /* regra dura: nenhum itálico no site */ --display-emph-color: var(--brasa); --display-emph-weight: 600; /* Escala fluida entre mobile e desktop */ --t-display: clamp(2.125rem, 1.2rem + 3.9vw, 3.75rem); /* hero 34 → 60px */ --t-h1: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); /* 32 → 52px */ --t-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.625rem); /* 28 → 42px */ --t-h3: clamp(1.5rem, 1.28rem + 0.95vw, 2rem); /* 24 → 32px */ --t-h4: clamp(1.3125rem, 1.18rem + 0.55vw, 1.625rem); /* 21 → 26px */ --t-h5: 1.375rem; /* 22px */ --t-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); /* 17 → 19px */ --t-body: 1.0625rem; /* 17px */ --t-sm: 1rem; /* 16px */ --t-xs: 0.875rem; /* 14px */ --t-stat: clamp(1.75rem, 1.35rem + 1.7vw, 2.625rem); --lh-display: 1.06; --lh-tight: 1.14; --lh-snug: 1.28; --lh-body: 1.4; --lh-relaxed: 1.45; --lh-loose: 1.6; --lh-prose: 1.68; /* corpo longo: a página respira, como a sessão */ --ls-display: -0.025em; --ls-tight: -0.011em; --ls-caps: 0.09em; --otf: 'cv03' on, 'cv04' on, 'cv09' on, 'cv11' on; /* ---------- Espaçamento (escala 8) ---------- */ --sp-xs: 4px; --sp-sm: 8px; --sp-md: 10px; --sp-lg: 12px; --sp-xl: 16px; --sp-2xl: 20px; --sp-3xl: 24px; --sp-4xl: 32px; --sp-5xl: 48px; --sp-6xl: 64px; --sp-7xl: 96px; --section-y: clamp(72px, 8vw, 140px); --gutter: clamp(20px, 4vw, 64px); --maxw: 1280px; --maxw-text: 62ch; /* ---------- Raios ---------- */ --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 14px; --r-2xl: 24px; --r-card: 24px; --r-pill: 999px; /* ---------- Movimento ---------- Eases e springs herdados da engenharia do template. Não renomear: js/main.js depende deles para o reveal em spring e para o parallax. */ --ease-brand: cubic-bezier(0.44, 0, 0.56, 1); --ease-drift: cubic-bezier(0.34, 0.64, 0.34, 1); --ease-snap: cubic-bezier(0.27, 0, 0.51, 1); --dur-fast: 0.2s; --dur-base: 0.4s; --dur-slow: 1s; --dur-cinema: 2s; } /* Breakpoints do template (preservados): mobile ≤ 699.98px tablet 700px-1199.98px desktop ≥ 1200px */