/* ========================================================================== VARIABLES.CSS — Design Tokens ZTW Empreendimentos Único arquivo que muda para criar variação de tema. Todos os valores derivados da identidade real (IDV 2021 + material 2026). ========================================================================== */ :root { /* ---------- Base neutra ---------- Escala fria, para conversar com o índigo que fecha o gradiente da marca. */ --void: #0C0C0E; /* fundo principal do site */ --surface: #16161A; /* cards, blocos elevados */ --surface-2: #1E1E23; /* hover, estados ativos */ --line: #26262C; /* bordas, divisores */ --chumbo: #1F1D1D; /* chumbo institucional do briefing */ /* ---------- Texto ---------- */ --text: #FFFFFF; --text-muted: #8E8E99; --text-dim: #7E7E8A; /* 4,9:1 sobre --void */ /* ---------- Marca ZTW ---------- Amostrados do símbolo original. O gradiente corre da esquerda para a direita, como no logo. */ --ztw-pink: #F173AC; --ztw-mauve: #A968AA; --ztw-indigo: #655FAA; --gradient-ztw: linear-gradient(90deg, var(--ztw-pink) 0%, var(--ztw-mauve) 52%, var(--ztw-indigo) 100%); --gradient-ztw-45: linear-gradient(135deg, var(--ztw-pink) 0%, var(--ztw-mauve) 52%, var(--ztw-indigo) 100%); /* ---------- Acentos por empreendimento ---------- Cada torre tem sua própria temperatura. Aplicados via [data-empreendimento="carbon"] no ou no wrapper da seção. */ --accent: var(--ztw-mauve); /* fallback = marca-mãe */ --accent-carbon: #C98A3C; /* âmbar quente */ --accent-space: #45D8E8; /* ciano frio */ --accent-vale: #A968AA; /* malva, circuito */ /* ---------- Tipografia ---------- Display: Space Grotesk — grotesca técnica, terminais retos, conversa com a linguagem de circuito do símbolo. Corpo: Montserrat — já é a fonte do material comercial da ZTW, mantém continuidade entre site e apresentações. Dados: JetBrains Mono — fichas técnicas lidas como datasheet. */ --font-display: 'Space Grotesk', 'Helvetica Neue', sans-serif; --font-body: 'Montserrat', system-ui, sans-serif; --font-data: 'JetBrains Mono', ui-monospace, monospace; /* Escala tipográfica — fluida, base 16px */ --fs-hero: clamp(2.75rem, 6vw, 5.5rem); --fs-h1: clamp(2.25rem, 4.4vw, 3.75rem); --fs-h2: clamp(1.75rem, 3vw, 2.5rem); --fs-h3: clamp(1.25rem, 2vw, 1.625rem); --fs-body: 1rem; --fs-small: 0.875rem; --fs-micro: 0.75rem; --lh-tight: 1.05; --lh-heading: 1.15; --lh-body: 1.65; /* Tracking largo para caixa-alta — o "EMPREENDIMENTOS" do logo usa esse tratamento, então vira padrão dos eyebrows. */ --track-wide: 0.22em; --track-mid: 0.08em; /* ---------- Espaçamento ---------- */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --space-6: 6.5rem; --space-section: clamp(4rem, 9vw, 9rem); --container: 1320px; --container-narrow: 760px; --gutter: clamp(1.25rem, 4vw, 3rem); /* ---------- Forma ---------- Raio baixo: a marca é feita de linhas retas e ângulos. Nada de pill em card. */ --radius-card: 4px; --radius-btn: 2px; --radius-pill: 999px; /* só para badges de status */ /* ---------- Traço de circuito ---------- Elemento de assinatura. Espessura e nó derivados do logo. */ --trace-width: 1px; --trace-color: #3E3E48; --node-size: 7px; --node-ring: 1.5px; /* ---------- Sombras e brilho ---------- */ --shadow-card: 0 18px 48px rgba(0, 0, 0, 0.55); --shadow-lift: 0 24px 64px rgba(0, 0, 0, 0.7); --glow-ztw: 0 0 24px rgba(169, 104, 170, 0.28); /* ---------- Movimento ---------- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 180ms; --dur: 420ms; --dur-slow: 900ms; /* ---------- Camadas ---------- */ --z-header: 100; --z-overlay: 200; --z-modal: 300; } /* Acento contextual por empreendimento */ [data-empreendimento="carbon"] { --accent: var(--accent-carbon); } [data-empreendimento="space"] { --accent: var(--accent-space); } [data-empreendimento="vale"] { --accent: var(--accent-vale); } /* Respeita preferência de movimento reduzido */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; } }