/* ========================================================= PIER PARTNERS — DESIGN TOKENS Tom padrão: I · Institucional (navy dominante) Stack alvo: HTML estático + CSS3 vanilla + JS ES6 Cole este arquivo em /css/tokens.css e importe PRIMEIRO no , antes de qualquer outro CSS do site. ========================================================= */ :root { /* ---------- CORES ---------- */ /* Navy — cor primária, dominante em capas e hero */ --navy-900: #050F1E; /* background mais profundo (topo do gradiente) */ --navy-800: #0B1A30; /* superfícies escuras, onda 1 */ --navy-700: #0E2340; /* onda 2 */ --navy-600: #112949; /* onda 3 */ --navy-500: #163365; /* onda 4, base do gradiente */ --navy-400: #17385C; /* textos em dark mode, detalhes */ /* Paper — superfícies claras */ --paper-50: #FAF8F3; /* background claro principal */ --paper-100: #F2EFE7; /* background claro secundário */ --paper-200: #E6E1D3; /* divisores, bordas finas */ /* Neutros */ --ink-900: #0A0F1A; /* texto sobre paper */ --ink-700: #2A3140; /* texto secundário sobre paper */ --ink-500: #5A6272; /* texto auxiliar */ --ink-300: #A8ADBA; /* captions, metadata */ /* Acento — usar com parcimônia */ --signal-500: #4A9FD4; /* Signal Blue — só para dados, KPIs, links de destaque */ --signal-300: rgba(74, 159, 212, 0.08); /* overlay/grid sutil sobre navy */ /* Semântica (aliases — use SEMPRE estes nos componentes) */ --bg-primary: var(--navy-900); --bg-surface: var(--navy-800); --bg-paper: var(--paper-50); --text-on-dark: var(--paper-50); --text-on-light: var(--ink-900); --text-muted-dark: rgba(250, 248, 243, 0.7); --text-muted-light: var(--ink-500); --accent: var(--signal-500); --divider-dark: rgba(250, 248, 243, 0.12); --divider-light: var(--paper-200); /* ---------- TIPOGRAFIA ---------- */ /* Famílias (importar via Google Fonts no ) */ --font-display: 'Manrope', system-ui, -apple-system, sans-serif; --font-body: 'Manrope', system-ui, -apple-system, sans-serif; --font-mono: 'Manrope', ui-monospace, monospace; /* eyebrows/labels */ /* Escala modular (1.25 — major third) */ --text-xs: 0.75rem; /* 12px — captions */ --text-sm: 0.875rem; /* 14px — metadata */ --text-base: 1rem; /* 16px — corpo */ --text-lg: 1.125rem; /* 18px — corpo grande */ --text-xl: 1.5rem; /* 24px — subtítulos */ --text-2xl: 2rem; /* 32px — títulos de seção */ --text-3xl: 2.75rem; /* 44px — H1 de páginas internas */ --text-4xl: 4rem; /* 64px — display médio */ --text-5xl: 6rem; /* 96px — display hero */ /* Pesos — tom INSTITUCIONAL (default) */ --weight-display: 300; /* Manrope Light — peso histórico */ --weight-body: 400; --weight-medium: 500; /* Line-heights */ --leading-tight: 1.05; /* display */ --leading-snug: 1.25; /* títulos */ --leading-normal: 1.55; /* corpo */ --leading-loose: 1.75; /* corpo editorial */ /* Letter-spacing */ --tracking-display: -0.02em; --tracking-eyebrow: 0.16em; /* maiúsculas de eyebrow/kicker */ /* ---------- ESPAÇAMENTO (4pt baseline) ---------- */ --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; /* ---------- LAYOUT ---------- */ --container-max: 1280px; --gutter: clamp(20px, 4vw, 48px); /* ---------- RAIOS ---------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 24px; /* ---------- SOMBRAS (usar raramente) ---------- */ --shadow-sm: 0 1px 2px rgba(5, 15, 30, 0.08); --shadow-md: 0 8px 24px rgba(5, 15, 30, 0.12); /* ---------- MOTION ---------- */ --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1); --duration-fast: 160ms; --duration-med: 240ms; --duration-slow: 420ms; } /* ========================================================= RESET + BASE ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-body); line-height: var(--leading-normal); color: var(--text-on-light); background: var(--bg-paper); text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); margin: 0 0 var(--space-4); text-wrap: balance; } p { margin: 0 0 var(--space-4); text-wrap: pretty; } a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--duration-fast) var(--ease-standard); } a:hover { border-bottom-color: currentColor; } .eyebrow { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent); } /* Seções com bg navy invertem a cor do texto automaticamente */ .section--dark { background: var(--bg-primary); color: var(--text-on-dark); } .section--dark .eyebrow { color: rgba(255,255,255,0.6); }