/* ========================================================= Isa Oliver — Tokens (cor + tipografia + escala) Fonte da verdade. Derivado do Design System aprovado. Fontes carregadas via no de cada página. ========================================================= */ :root { /* ---- COR: paleta base (4 cores) ---- */ --io-preto: #0D0D0D; --io-telha: #6B2318; --io-dourado: #B8860B; --io-linho: #F4EBD9; /* derivados (luminância da mesma paleta — não cores novas) */ --io-preto-soft: #161513; --io-linho-soft: #EADFC9; --io-telha-deep: #4A1810; --io-dourado-deep: #8E6708; --io-dourado-lume: #D9A526; /* ---- COR: semânticas ---- */ --bg: var(--io-linho); --bg-inverse: var(--io-preto); --fg: var(--io-preto); --fg-muted: rgba(13,13,13,0.62); --fg-subtle: rgba(13,13,13,0.42); --fg-on-dark: var(--io-linho); --fg-on-dark-muted: rgba(244,235,217,0.66); --fg-on-dark-subtle:rgba(244,235,217,0.42); --accent: var(--io-dourado); --accent-warm: var(--io-telha); --border: rgba(13,13,13,0.15); --border-soft: rgba(13,13,13,0.08); --border-on-dark: rgba(244,235,217,0.16); --border-on-dark-soft: rgba(244,235,217,0.08); --focus-ring: var(--io-dourado); /* ---- TIPOGRAFIA: famílias ---- */ --font-script: "Homemade Apple", "Segoe Script", cursive; --font-display: "Fraunces", "Cormorant Garamond", Georgia, serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* ---- TIPOGRAFIA: escala ---- */ --fs-wordmark: clamp(48px, 8vw, 96px); --fs-display: clamp(48px, 6vw, 92px); --fs-h1: clamp(40px, 5vw, 66px); --fs-h2: clamp(28px, 3.6vw, 46px); --fs-h3: 20px; --fs-label: 13px; --fs-body: 17px; --fs-body-lg: 19px; --fs-meta: 13px; --fs-micro: 11px; --lh-tight: 1.04; --lh-snug: 1.18; --lh-normal: 1.55; --lh-loose: 1.7; --tracking-tight: -0.015em; --tracking-normal: 0; --tracking-wide: 0.12em; --tracking-x-wide: 0.22em; --tracking-xx-wide:0.34em; /* ---- ESPAÇO + LAYOUT ---- */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px; --space-11:176px; --radius-0:0px; --radius-pill:999px; --radius-circle:50%; --container:1240px; --container-narrow:760px; --gutter-desktop:80px; --gutter-mobile:24px; /* ---- MOVIMENTO ---- */ --dur-fast:120ms; --dur:220ms; --dur-slow:520ms; --ease:cubic-bezier(0.22,0.61,0.36,1); }