/* =============================================================================
Tipografia — Fraunces e Inter, servidas por nós
=============================================================================
A Fraunces é a fonte do handoff de design (design_handoff_clariia_redesign/
Clari.IA v3.dc.html), e é a que a marca sempre quis. Durante meses esteve
declarada em --f-display sem nunca ser carregada: não havia .woff2 no
repositório nem link para lado nenhum, e o produto caía todo na segunda
fonte da pilha — Georgia no Windows, Iowan no Mac, um serif qualquer no
Android. A identidade mudava conforme o aparelho de quem abria.
Auto-alojadas em vez do CDN da Google, por esta ordem de razões: é produto
de saúde e a Google Fonts entrega o IP de quem visita a um terceiro — o
mesmo raciocínio que já tinha afastado o Cloudflare em modo proxy (D-020);
e uma dependência externa a menos é um modo de falha a menos no arranque.
Só latin e latin-ext: o português cabe todo aí.
O ITÁLICO DA FRAUNCES NÃO É ENFEITE. É o logótipo — clari.ia — e é
a ênfase do handoff, «você não fica sozinho». Sem ele o navegador
inclina a romana por conta própria e o resultado é falso itálico, que é
exatamente o que se nota como «fonte estranha» sem se saber porquê.
SOBRE O TAMANHO ÓPTICO. A Fraunces é variável e tem eixo `opsz` de 9 a 144:
o desenho muda com o corpo — mais contraste e mais fino em título grande,
mais robusto em texto pequeno. Os navegadores aplicam isto sozinhos via
`font-optical-sizing: auto`, que é o valor por omissão. Não fixar `opsz` à
mão: fixar é que faz a fonte parecer errada num dos extremos.
O peso de display é 400, não 600, e está assim tanto no handoff como no
funil.css e na landing. A Fraunces a 600 fica pesada e perde a elegância
que justifica tê-la.
============================================================================= */
/* Fraunces · italic 400 · latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/fontes/fraunces-italic-400-latin-ext.woff2) format('woff2');
unicode-range:
U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces · italic 400 · latin */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/fontes/fraunces-italic-400-latin.woff2) format('woff2');
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fraunces · normal 400 600 · latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url(/fontes/fraunces-normal-400-600-latin-ext.woff2) format('woff2');
unicode-range:
U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces · normal 400 600 · latin */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url(/fontes/fraunces-normal-400-600-latin.woff2) format('woff2');
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono · normal 400 · latin-ext */
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fontes/ibm-plex-mono-normal-400-latin-ext.woff2) format('woff2');
unicode-range:
U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono · normal 400 · latin */
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fontes/ibm-plex-mono-normal-400-latin.woff2) format('woff2');
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono · normal 500 · latin-ext */
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fontes/ibm-plex-mono-normal-500-latin-ext.woff2) format('woff2');
unicode-range:
U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono · normal 500 · latin */
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fontes/ibm-plex-mono-normal-500-latin.woff2) format('woff2');
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter · normal 400 700 · latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(/fontes/inter-normal-400-700-latin-ext.woff2) format('woff2');
unicode-range:
U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter · normal 400 700 · latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(/fontes/inter-normal-400-700-latin.woff2) format('woff2');
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* =============================================================================
Clari.IA — Design Tokens v3
=============================================================================
Substitui packages/design-system/tokens.css.
Os NOMES das variáveis são exatamente os mesmos da versão anterior — só os
VALORES mudam. Isso é deliberado: funil.css e home.css continuam a compilar
sem alteração, e o redesenho entra por camadas. Os tokens novos estão
agrupados no fim de cada bloco, marcados com « novo ».
Direção: creme quente + sálvia como superfície, terracota como acento
decorativo, e um carvão (--c-surface-deep) usado com parcimônia — só onde
um elemento tem de dominar a tela (o anel do Ritmo, o botão primário).
O escuro é o que dá a hierarquia dramática que faltava.
============================================================================= */
:root {
/* --- Fundo e superfície ------------------------------------------------ */
--c-bg: #f2eee6; /* creme quente. nunca branco puro */
--c-surface: #ffffff; /* cartões */
--c-surface-soft: #f7f4ee; /* campos, cartões secundários */
--c-surface-deep: #21241f; /* « novo » carvão: Ritmo, botão primário */
--c-surface-taupe: #e7e2d6; /* « novo » cartão neutro, resultado barrado */
/* Ícone sobre taupe. DECORATIVO — não é texto, e por isso não precisa de
passar em contraste de leitura. Sobre taupe, título usa --c-ink e corpo
usa --c-ink-muted: ambos com folga de sobra. */
--c-taupe-icon: #6b5844;
/* Trilho de barra e estado desabilitado. Botão desabilitado NUNCA é só
opacidade: sobre creme, opacidade fica ilegível. */
--c-track: #e3dcce;
--c-disabled-surface: #e3dcce;
/* Era #a2a79a, 1,8:1 sobre a superfície desabilitada: a WCAG isenta
controle inativo, mas o handoff pede desabilitado legível. #767b6e dá
3,2:1 e continua visivelmente mais apagado que a tinta subtil. */
--c-disabled-ink: #767b6e;
--c-border: rgba(27, 29, 25, 0.12);
/* Contorno de controle (botão secundário), do handoff: um degrau acima de
--c-border para o botão não se confundir com um cartão. */
--c-border-controle: rgba(27, 29, 25, 0.16);
/* Véu claro do :hover do secundário (handoff §2). */
--c-hover-claro: rgba(255, 255, 255, 0.7);
/* O mesmo secundário sobre o cartão carvão: contorno e véu em creme, que o
contorno escuro sumiria no carvão. */
--c-border-controle-inverso: rgba(242, 238, 230, 0.32);
--c-hover-escuro: rgba(242, 238, 230, 0.08);
--c-border-strong: #4e6b3e; /* contorno de campo em foco */
/* --- Tinta -------------------------------------------------------------
ink 15,8:1 sobre bg — texto principal
ink-muted 7,6:1 sobre bg — texto secundário
ink-subtle 4,9:1 sobre bg — legendas. NÃO descer abaixo disto
CORRIGIDO na implementação: o valor entregue era #6B6F64, que dá 4,44 —
abaixo do mínimo AA de 4,5, apesar de o comentário afirmar 4,9. Escurecido
o mínimo necessário para 4,86. */
/* Tinta com cor, não preto neutro. A referência que motivou a mudança
(lon.life) escreve a azul-marinho #113274 sobre um fundo frio; sobre o
nosso creme quente esse azul brigaria com a terracota. O movimento
coerente é o mesmo, na nossa direção: aprofundar a própria sálvia até
virar tinta. Já havia um viés verde aqui (#1b1d19 tem G quatro pontos
acima de R), só que subtil demais para se ler — este triplica-o.
13,8:1 sobre --c-bg, bem acima do mínimo AAA de 7. */
--c-ink: #16251a;
--c-ink-muted: #57544e;
--c-ink-subtle: #65695e;
--c-ink-inverse: #f2eee6;
/* --- Primária (sálvia) -------------------------------------------------
primary SUPERFÍCIE E GRÁFICO APENAS. nunca texto
primary-strong 5,6:1 — texto e ícone */
--c-primary: #cbd9be;
--c-primary-soft: #e7eee1;
--c-primary-strong: #4e6b3e;
--c-primary-ink: #22301b; /* « novo » texto sobre --c-primary */
/* Sálvia escura sólida: botão pastilha sobre o cartão carvão do Ritmo
(10,4:1 com a tinta creme). Estava escrita à mão no home.css. */
--c-primary-deep: #2c3a24;
/* --- Acento (terracota) ------------------------------------------------
DECORATIVO. proibido em qualquer contexto de estado clínico. */
--c-accent: #eedbd0;
--c-accent-soft: #f6e7df;
--c-accent-strong: #8b5a42;
--c-accent-ink: #4a2e22; /* « novo » texto sobre --c-accent */
/* --- Semântica ---------------------------------------------------------
Toda situação clínica usa esta camada. Cada estado exige um segundo
canal além da cor (ícone ou rótulo). */
--c-success: #3f7d46;
--c-success-soft: #dcebdd;
--c-success-strong: #2f6135;
--c-warning: #b8791c;
--c-warning-soft: #f3e2c4;
/* O README especifica #7A5715 para este texto e o ficheiro de tokens trazia
#8A6420, que dá 4,20 sobre o âmbar — abaixo de AA. Vale o do README. */
--c-warning-strong: #7a5715;
--c-danger: #b4322b;
--c-danger-soft: #f8dedc;
--c-danger-strong: #8e2721;
--c-info: #2c6e8f;
--c-info-soft: #dceaf1;
--c-info-strong: #215671;
/* --- Gradientes ------------------------------------------------- novo --
Só dois no sistema inteiro. Mais do que isso vira decoração. */
--g-ring: linear-gradient(135deg, #cbd9be, #e8c4af);
--g-bar: linear-gradient(90deg, #8fa97c, #c99a7f);
/* As pontas dos dois gradientes, nomeadas. Existem porque um `` de SVG
não aceita gradiente: sem token, a cor teria de ser escrita à mão dentro
da tela, que é exatamente o que o sistema proíbe. */
--c-ring-fim: #e8c4af;
--c-graf-linha: #8fa97c;
/* --- Tipografia --------------------------------------------------------
Fraunces nos títulos e Inter na interface, ambas carregadas pelos
@font-face no topo deste ficheiro. O resto de cada pilha é reserva: se
um .woff2 falhar, o texto assenta em algo próximo em vez de saltar para
o serif do sistema. */
--f-display: Fraunces, 'Iowan Old Style', Charter, Georgia, serif;
--f-ui: Inter, 'Segoe UI', system-ui, -apple-system, sans-serif;
/* IBM Plex Mono — números e rótulos de dado. A monoespaçada é o que dá ar
de instrumento de medida a um índice clínico, e era a voz que faltava.
A razão mecânica pesa mais que a estética: com
`font-variant-numeric: tabular-nums` o número do Ritmo deixa de mudar de
largura ao passar de 78 para 91. Num valor que se recalcula todas as
semanas dentro de um anel centrado, esse salto via-se. */
--f-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
--fs-hero: clamp(2.5rem, 7.6vw, 4.25rem); /* « novo » herói da landing */
--fs-display: 2.375rem; /* 38px — título de passo do funil */
--fs-h1: 1.8125rem; /* 29px */
--fs-h2: 1.375rem; /* 22px */
--fs-h3: 1.0625rem; /* 17px */
--fs-body: 1rem; /* 16px — piso absoluto no telemóvel */
--fs-sm: 0.875rem; /* 14px — apoio, nunca informação essencial */
--fs-xs: 0.75rem; /* 12px — rótulos com letter-spacing */
/* 13px: legenda de cartão e texto de apoio curto. Havia 12,5, 13 e 13,5px
escritos à mão em mais de vinte lugares: o degrau faltava na escala. */
--fs-legenda: 0.8125rem;
--fs-fig-xl: 4.75rem; /* « novo » número do anel do Ritmo */
--fs-fig-l: 2.75rem; /* « novo » IMC, preço, peso atual */
--ls-label: 0.12em; /* « novo » rótulo caixa-alta */
--ls-display: -0.02em; /* « novo » título display */
--lh-tight: 1.06;
--lh-snug: 1.35;
--lh-body: 1.6;
--fw-regular: 400;
--fw-medium: 500;
--fw-semi: 600;
/* --- Espaçamento (base 4) --------------------------------------------- */
--s-1: 0.25rem;
--s-2: 0.5rem;
--s-3: 0.75rem; /* 12px — gap padrão entre cartões */
--s-4: 1rem;
--s-5: 1.375rem; /* 22px — padding interno de cartão */
--s-6: 2rem;
--s-7: 3rem;
--s-8: 4.5rem; /* respiro entre secções da landing */
/* --- Raio --------------------------------------------------------------
Maiores que na v2, e com mais degraus: é o que separa um painel de um
cartão sem precisar de sombra. */
--r-xs: 8px; /* caixa de marcar, detalhe miúdo */
--r-sm: 12px; /* pastilha de escala 0–10, selo pequeno */
--r-md: 18px; /* campo, botão retangular */
--r-lg: 26px; /* cartão pequeno */
--r-xl: 34px; /* painel, cartão grande, folha inferior */
--r-full: 999px;
/* --- Elevação ----------------------------------------------------------
Discreta e quente (nunca cinza-azulado sobre creme). */
--e-1: 0 2px 8px rgba(40, 36, 28, 0.05);
--e-2: 0 8px 24px rgba(40, 36, 28, 0.08);
--e-3: 0 20px 50px rgba(40, 36, 28, 0.14);
--e-cta: 0 8px 22px rgba(33, 36, 31, 0.16); /* « novo » botão primário */
/* --- Alvo de toque ------------------------------------------------------ */
--touch-min: 44px;
/* --- Movimento ----------------------------------------------------------
Uma curva só, em todo o produto. É ela que dá a sensação de "caro". */
--e-out: cubic-bezier(0.22, 1, 0.36, 1);
--t-fast: 180ms var(--e-out);
--t-base: 320ms var(--e-out);
--t-slow: 550ms var(--e-out); /* « novo » entrada de cartão */
--t-ring: 1500ms var(--e-out); /* « novo » desenho do anel + contagem */
/* --- Landing (rodada 30/09) --- */
/* Ponto de contato isolado no gráfico da landing («consultas sem contato
entre elas»). Terracota de gráfico, DECORATIVO como todo o acento: nunca
comunica estado, e não é o --c-danger (gráfico nunca usa vermelho). Era
#d98e7e escrito à mão em quatro lugares da landing. */
--c-graf-isolado: #d98e7e;
}
@media (prefers-reduced-motion: reduce) {
:root {
--t-fast: 1ms;
--t-base: 1ms;
--t-slow: 1ms;
--t-ring: 1ms;
}
}