/* ============================================================ bossa.consulting v3 — tokens Cores, temas [data-theme], tipografia, easings, springs, grid. Mecânica Collins, pele bossa. Nenhuma fonte ou cor da Collins. ============================================================ */ /* ---------- Fontes self-hosted (Inria, woff2 local) ---------- */ @font-face { font-family: "Inria Sans"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/InriaSans-Light.woff2") format("woff2"); } @font-face { font-family: "Inria Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/InriaSans-Regular.woff2") format("woff2"); } @font-face { font-family: "Inria Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/InriaSans-Bold.woff2") format("woff2"); } @font-face { font-family: "Inria Serif"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/InriaSerif-Italic.woff2") format("woff2"); } @font-face { font-family: "Inria Serif"; font-weight: 300; font-style: italic; font-display: swap; src: url("../fonts/InriaSerif-LightItalic.woff2") format("woff2"); } :root { /* ---------- Paleta bossa (Editorial Luxo) ---------- */ --preto: #000000; --branco: #ffffff; --creme: #e8e8e8; --lavender: #a79ef7; /* cinza de apoio: #69727d dava 3.98:1 sobre creme, abaixo do mínimo do próprio sistema (4.5:1). #5a626b dá 5.11:1 sobre creme e 6.19:1 sobre branco. */ --mid-escuro: #5a626b; /* ---------- Famílias ---------- */ --font-sans: "Inria Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --font-serif: "Inria Serif", Georgia, "Times New Roman", serif; /* ---------- Grid (um token resolve container e respiro) ---------- */ --max-width: 1244px; --gutter-width: 1rem; --grid-padding-min: 1.5rem; --grid-padding: max(var(--grid-padding-min), calc((100vw - var(--max-width)) / 2)); /* ---------- Easings (curva de Penner, lida do CSS Collins) ---------- */ --ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95); --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955); --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1); --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1); --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1); --ease-in-out-expo: cubic-bezier(1, 0, 0, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); --ease-signature: cubic-bezier(0.5, 0.3, 0, 1); --view-transition-easing: cubic-bezier(0.86, 0, 0.07, 1); /* ---------- Springs (linear(), sem biblioteca) ---------- */ --spring-common-duration: 0.667s; --spring-common: linear(0, 0.00506 1.18%, 0.02044 2.46%, 0.08322 5.391%, 0.46561 17.652%, 0.63901 24.342%, 0.76663 31.093%, 0.85981 38.454%, 0.89862 42.934%, 0.92965 47.845%, 0.95366 53.305%, 0.97154 59.516%, 0.99189 74.867%, 0.9991); --easing-spring-elegant-duration: 0.58171s; /* ---------- Durações (estrutura devagar, cor rápida) ---------- */ --dur-slow: 0.8s; --dur-mid: 0.5s; --dur-fast: 0.25s; --dur-color: 0.15s; /* ---------- Sombra (só nasce no hover, nunca fixa) ---------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12); } /* ============================================================ TEMAS — a "maré de cor no scroll" Cada tema re-escopa as variáveis semânticas. Quem pinta o fundo é o (transição de .8s); as seções são transparentes. Ver collins-interaction-system §1. ============================================================ */ [data-theme="creme"] { --bg: var(--creme); --fg: var(--preto); --mid: var(--mid-escuro); /* lavender sobre creme dá 1.93:1 — ilegível. O acento só vive no escuro. */ --accent: var(--mid-escuro); --line: rgba(0, 0, 0, 0.14); --halo: rgba(0, 0, 0, 0.05); --btn-bg: var(--preto); --btn-fg: var(--creme); } [data-theme="branco"] { --bg: var(--branco); --fg: var(--preto); --mid: var(--mid-escuro); --accent: var(--mid-escuro); --line: rgba(0, 0, 0, 0.12); --halo: rgba(0, 0, 0, 0.045); --btn-bg: var(--preto); --btn-fg: var(--branco); } [data-theme="preto"] { --bg: var(--preto); --fg: var(--creme); --mid: #a8a8a8; --accent: var(--lavender); --line: rgba(255, 255, 255, 0.16); --halo: rgba(255, 255, 255, 0.08); --btn-bg: var(--creme); --btn-fg: var(--preto); }