/* ============================================================================= DESIGN TOKENS — Ecossistema Digital Rafael Toniete ----------------------------------------------------------------------------- Fonte única de verdade para cores, tipografia e espaçamento de TODAS as marcas. Cada marca possui seu próprio bloco de tokens (prefixo identificador): - zapin.pro → --zp-* (dark tech) - toniete.ai → --ta-* (editorial claro) - soubella.ai → --sb-* (fashion digital) Como usar: 1. Importe este arquivo no ANTES do CSS específico do projeto. 2. Referencie os tokens via var() no CSS do projeto: background: var(--zp-black); ============================================================================ */ :root { /* =========================================================================== MARCA 1 — zapin.pro (site institucional / dark tech, minimalista) ========================================================================= */ --zp-black: #0A0A0A; /* fundo principal */ --zp-surface: #111111; /* cards e seções */ --zp-border: #1E1E1E; /* bordas sutis */ --zp-accent: #7B5CF0; /* roxo elétrico — ação */ --zp-accent2: #00D4AA; /* teal/verde — destaque secundário */ --zp-text: #F0F0F0; /* texto principal */ --zp-muted: #888888; /* texto secundário */ /* Gradiente de assinatura (borda animada de cards de produto) */ --zp-gradient: linear-gradient(135deg, #7B5CF0 0%, #00D4AA 100%); /* Tipografia */ --zp-font-display: "Space Grotesk", system-ui, sans-serif; --zp-font-body: "Inter", system-ui, sans-serif; --zp-font-mono: "JetBrains Mono", ui-monospace, monospace; /* =========================================================================== MARCA 2 — toniete.ai (blog de criador / editorial, claro, legível) ========================================================================= */ --ta-bg: #F9F9F7; /* Off-White — fundo limpo */ --ta-surface: #FFFFFF; /* Pure White */ --ta-accent: #E2611C; /* Burnt Orange — assinatura, fills, CTA */ --ta-accent-soft: #F0762A; /* laranja claro — hover/realce sobre escuro */ --ta-accent-deep: #B84A0E; /* laranja profundo — links/texto sobre claro (AA) */ --ta-ink: #1A1A1A; /* Ink — texto */ --ta-muted: #5E6675; /* Muted Gray — texto secundário */ --ta-tag: #FFE7D6; /* Tag Peach — fundo de tags, badges */ /* Tipografia */ --ta-font-display: "Lora", Georgia, serif; --ta-font-body: "Inter", system-ui, sans-serif; --ta-font-code: "JetBrains Mono", ui-monospace, monospace; /* =========================================================================== MARCA 3 — soubella.ai (influencer virtual / fashion digital, vibrante) ========================================================================= */ --sb-bg: #FFF8F5; /* quente, feminino */ --sb-surface: #FFFFFF; --sb-rose: #E8507A; /* rosa vibrante — assinatura */ --sb-coral: #FF7B54; /* coral — energia */ --sb-dark: #1A0A12; /* quase preto com tom quente */ --sb-muted: #9CA3AF; --sb-gold: #F59E0B; /* detalhes premium */ /* Gradiente de assinatura (rosa → coral) */ --sb-gradient: linear-gradient(135deg, #E8507A 0%, #FF7B54 100%); /* Tipografia */ --sb-font-display: "Playfair Display", Georgia, serif; --sb-font-body: "DM Sans", system-ui, sans-serif; --sb-font-accent: "Dancing Script", cursive; /* =========================================================================== TOKENS GLOBAIS COMPARTILHADOS (espaçamento, raios, sombras, breakpoints) ========================================================================= */ /* Escala de espaçamento (base 4px) */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-24: 6rem; /* 96px */ /* Raios de borda */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 9999px; /* Sombras */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12); /* Largura máxima de conteúdo */ --container: 1200px; --container-sm: 720px; /* ideal para leitura de blog */ /* Transições */ --transition: 200ms ease; /* Z-index */ --z-header: 100; --z-modal: 500; --z-float: 900; /* botões flutuantes (WhatsApp) */ } /* Breakpoints de referência (usar em media queries): mobile : até 640px (base — mobile-first) tablet : 641–1024px desktop : 1025px+ */