/* ============================================================ DESIGN TOKENS — drgersonneto.com v2 ============================================================ */ :root { /* ---------- Paleta LIGHT (vitrine / dia) ---------- */ --bg: #F8FAFC; --bg-2: #F1F5F9; --ink: #0F172A; --ink-mid: #334155; --ink-soft: #64748B; --ink-dim: #94A3B8; /* ---------- Acento ---------- */ --accent: #2563EB; --accent-lo: rgba(37, 99, 235, 0.07); --accent-mid: rgba(37, 99, 235, 0.22); /* ---------- Bordas ---------- */ --border: rgba(15, 23, 42, 0.08); --border-dk: rgba(15, 23, 42, 0.13); /* ---------- Tipografia ---------- */ --f-display: 'DM Serif Display', Georgia, serif; --f-mono: 'DM Mono', 'JetBrains Mono', monospace; --f-body: 'DM Sans', system-ui, -apple-system, sans-serif; /* Escala tipográfica */ --fs-micro: 9px; /* eyebrows / tags */ --fs-label: 11px; /* nav / mono labels */ --fs-body: 16px; --fs-body-sm: 14px; --fs-body-xs: 13px; --fs-lead: 18px; --fs-h3: 20px; --fs-h2: clamp(30px, 2.8vw, 44px); --fs-h2-lg: clamp(34px, 3.2vw, 52px); --fs-h1: clamp(48px, 5vw, 78px); /* Tracking */ --ls-mono-sm: 0.16em; --ls-mono: 0.18em; --ls-mono-lg: 0.22em; --ls-tight: -0.02em; --ls-tighter: -0.025em; /* ---------- Espaços ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-14: 56px; --sp-16: 64px; --sp-20: 80px; --sp-24: 100px; /* ---------- Layout ---------- */ --container-pad: 60px; --container-pad-mobile: 20px; --nav-h: 60px; --nav-h-mobile: 56px; /* ---------- Motion ---------- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 0.2s; --dur: 0.35s; --dur-slow: 0.65s; /* ---------- Sombras ---------- */ --shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.08); } /* ============================================================ DARK MODE (gate / azul-noite) — use classe .theme-dark no ============================================================ */ .theme-dark { --bg: #0A0F1A; --bg-2: #0F172A; --ink: #F8FAFC; --ink-mid: #CBD5E1; --ink-soft: #94A3B8; --ink-dim: #64748B; --accent: #3B82F6; --accent-lo: rgba(59, 130, 246, 0.10); --accent-mid: rgba(59, 130, 246, 0.30); --border: rgba(248, 250, 252, 0.08); --border-dk: rgba(248, 250, 252, 0.14); --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.4); }