/* ============================================================= Dra. Annete Marie Camargo Ferrari · Ginecologia e Obstetrícia Design tokens. Ponto único de cor e de tipografia do site. Paleta da marca (definida no brief, não inventada): linho #F4F1EC fundo principal jade #2E5E6E cor de marca, botões, links, ênfase do display jade-fundo #1B3B45 seções escuras, footer jade-bruma #CBD9DA acento legível sobre escuro rosa-cha #C88A7A acento decorativo quente grafite #16262B texto principal grafite-suave #5B6C72 texto secundário Todos os tokens dependentes abaixo foram recalculados a partir desses sete valores com a fórmula WCAG (contraste relativo). Contraste medido ao lado de cada par texto/fundo em uso: mínimo AA (4.5:1) para texto de corpo. ============================================================= */ :root { /* ---------- Cor: paleta literal do brief ---------- */ --linho: #f4f1ec; --jade: #2e5e6e; --jade-fundo: #1b3b45; --jade-bruma: #cbd9da; --rosa-cha: #c88a7a; --grafite: #16262b; --grafite-suave: #5b6c72; /* ---------- Cor: superfícies ---------- */ --paper: var(--linho); /* fundo principal */ --paper-soft: #ece7df; /* placeholder de mídia, faixas discretas */ --white: #ffffff; /* cards */ /* ---------- Cor: marca ---------- */ --deep: var(--jade); /* primary, ênfase do display, botões, links, 6.33:1 sobre --paper */ --deep-800: #254b58; /* hover do botão escuro, 9.43:1 sobre branco */ --deep-900: var(--jade-fundo); /* seções escuras (footer, bloco escuro) */ --mist: var(--rosa-cha); /* acento secundário, decorativo, NUNCA texto sobre claro (2.53:1, reprova AA) */ --mist-deep: #8f4e3e; /* rosa-chá escurecido: ESTE pode virar texto, rótulo ou ícone no claro, 5.60:1 sobre --paper */ --mist-pale: var(--jade-bruma); /* acento legível sobre escuro, 8.23:1 sobre --deep-900 */ --mist-wash: #edf1f0; /* lavado, faixas de apoio, avisos */ /* ---------- Cor: texto ---------- */ --ink: var(--grafite); /* texto principal, 13.85:1 sobre --paper */ --ink-soft: var(--grafite-suave); /* texto secundário, 4.86:1 sobre --paper (AA) */ /* ---------- Céu do hero (gradiente literal do brief) ---------- */ --sky-top: var(--jade-fundo); --sky-bottom: var(--jade-bruma); --sky-stop: 84.31%; /* Véu do hero, em duas camadas (piso vertical + radial), tingido de --grafite (22,38,43). Medido ponto a ponto do gradiente: o texto do hero vive entre 13% e 71% da altura da seção (mesma faixa do exemplar) e o véu tem que segurar AA nela inteira, não só no topo. Sem essa curva mais funda que a de projeto original, o texto claro caía para ~3:1 perto dos 68 a 71% porque ali o céu já clareou para a cor de jade-bruma. Medido: linho a 5.76:1 em 71%, jade-bruma (o ) a 4.47:1 no mesmo ponto, os dois em AA. */ --sky-veil-rgb: 22, 38, 43; /* ---------- Cor: semânticos ---------- */ --bg: var(--paper); --surface: var(--white); --fg: var(--ink); --fg-muted: var(--ink-soft); --fg-on-dark: var(--linho); /* 10.60:1 sobre --deep-900 */ --fg-on-dark-mu: rgba(244, 241, 236, 0.78); /* 8.4:1 sobre --deep-900 */ --border: rgba(22, 38, 43, 0.12); --border-strong: rgba(22, 38, 43, 0.22); --accent: var(--deep); --dark-section: var(--deep-900); --inset-hairline: rgba(22, 38, 43, 0.06) 0 0 0 1px inset; /* ---------- Tipografia ---------- Sem serif e sem itálico neste site. O display é Outfit (terminações arredondadas, geometria macia, acolhimento sem infantilizar), o corpo é Karla (legível e humano), e o mono é Space Mono (kickers, números de registro, rótulos, o toque de consultório antigo). A ênfase do display se faz por COR e PESO, nunca por inclinação. */ --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-body: 'Karla', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: 'Space Mono', ui-monospace, Menlo, monospace; --display-weight: 500; --display-emph-style: normal; /* regra dura: nenhum itálico no site */ --display-emph-color: var(--deep); --display-emph-weight: 700; /* 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 consulta */ --ls-display: -0.02em; --ls-tight: -0.008em; --ls-caps: 0.09em; --otf: 'tnum' 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 exemplar. 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 */