/* ============================================================= Baioni Shiga, terapias orientais Design tokens. Ponto único de cor e de tipografia do site. Paleta da marca (definida no brief, não inventada): washi (fundo) #F3EFE4 folha (acento/botões) #5C7A4C folha funda (escuro) #31452B folha clara (sobre escuro) #C4D2B6 âmbar (acento raro) #8B5A2B oliva (faixa de apoio) #A89968 sumi (texto principal) #1E2418 sumi suave (texto 2) #5B6552 Abaixo, dois andares: 1) as OITO cores da marca, com nome próprio da casa; 2) os slots de arquitetura que styles.css e pages.css consomem (--paper, --deep, --mist...), cada um apontando pra uma cor da marca ou pra uma variação rebaixada dela até o AA (4.5:1 pra texto de corpo). O contraste de cada par está anotado. ============================================================= */ :root { /* ---------- 1. Paleta da marca (nomes próprios, literais) ---------- */ --washi: #f3efe4; --folha: #5c7a4c; /* 4.21:1 sobre --washi, passa AA só em texto grande */ --folha-800: #4c6a3f; /* folha rebaixada até 5.31:1 sobre --washi: pode virar texto */ --folha-900: #3f5735; /* folha rebaixada mais um degrau, hover intermediário */ --folha-funda: #31452b; --folha-clara: #c4d2b6; /* 6.57:1 sobre --folha-funda */ --ambar: #8b5a2b; /* 5.08:1 sobre --washi: pode virar texto */ --oliva: #a89968; /* 2.46:1 sobre --washi: decorativo, nunca texto no claro */ --oliva-deep: #6e6340; /* oliva rebaixado até 5.19:1 sobre --washi: pode virar texto */ --sumi: #1e2418; /* 13.84:1 sobre --washi */ --sumi-suave: #5b6552; /* 5.33:1 sobre --washi */ /* ---------- 2. Slots de arquitetura (consumidos por styles.css/pages.css) ---------- */ /* Superfícies */ --paper: var(--washi); --paper-soft: #eae4d3; /* placeholder de mídia, faixas discretas */ --white: #ffffff; /* Marca: --deep faz o papel duplo de botão E texto pequeno (kicker, rótulo, credencial), então usa a folha JÁ rebaixada: a --folha literal falha AA em texto (4.21:1), a --folha-800 passa em tudo (6.10:1 branco-sobre-ela como fundo de botão, 5.31:1 como texto sobre --paper). */ --deep: var(--folha-800); --deep-800: var(--folha-900); /* hover intermediário (pill--emph) */ --deep-900: var(--folha-funda); /* seções escuras + hover mais fundo */ --mist: var(--oliva); /* acento secundário: decorativo, nunca texto no claro */ --mist-deep: var(--oliva-deep); /* o mesmo oliva, rebaixado: este pode virar texto/ícone */ --mist-pale: var(--folha-clara); /* acento legível sobre escuro */ --mist-wash: #efead9; /* lavado: faixas de apoio, avisos */ /* Texto */ --ink: var(--sumi); --ink-soft: var(--sumi-suave); /* ---------- Céu do hero (gradiente literal do brief) ---------- */ --sky-top: #31452b; --sky-bottom: #c4d2b6; --sky-stop: 84.31%; /* Véu do hero. O pior fundo do título não é o degradê: é um bambu claro cruzando por trás dele perto do rodapé do céu, onde --sky-bottom já é um verde bem claro. Em 0.58 o texto washi sobe para ~4.71:1 sobre o ponto mais claro do céu, passa AA mesmo em texto de corpo, não só em texto grande. É este número que segura o hero; medir antes de baixar. */ --sky-veil: rgba(30, 36, 24, 0.58); /* ---------- Cor: semânticos ---------- */ --bg: var(--paper); --surface: var(--white); --fg: var(--ink); --fg-muted: var(--ink-soft); --fg-on-dark: #f3efe4; /* 9.06:1 sobre --deep-900 */ --fg-on-dark-mu: rgba(243, 239, 228, 0.78); /* ~7.1:1 sobre --deep-900 */ --border: rgba(30, 36, 24, 0.12); --border-strong: rgba(30, 36, 24, 0.22); --accent: var(--deep); --dark-section: var(--deep-900); --inset-hairline: rgba(30, 36, 24, 0.06) 0 0 0 1px inset; /* ---------- Tipografia ---------- Sem serif e sem itálico neste site. O display é a gótica japonesa Zen Kaku Gothic New (o cruzamento Brasil-Japão da casa), o corpo é Noto Sans, e o mono marca kickers, rótulos de terapia e números. A ênfase do display se faz por COR e PESO: nunca por inclinação. */ --font-display: 'Zen Kaku Gothic New', 'Noto Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-body: 'Noto Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: 'Red Hat 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 uma 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 a 1199.98px desktop ≥ 1200px */