/* ========================================================================== WB LAB — Design Tokens v2 Sistema construído a partir da referência escolhida (LP Dr. Bocharov): base clara, shell arredondado sobre fundo escuro, escala tipográfica contida, accent de marca usado com parcimônia. Cores derivadas da IDV: vinho #7C1823 · off-black #0F0F11 · branco. ========================================================================== */ :root { /* ---------- ESCALA DE MARCA — wine (10 stops) ---------- 500 = base · 600 = hover · 700 = pressionado 400 = accent sobre fundo escuro (4.74:1 — AA) */ --wine-50: #FAF2F3; --wine-100: #F4E4E6; --wine-200: #EBC9CD; --wine-300: #DE9EA5; --wine-400: #D05663; --wine-500: #7C1823; --wine-600: #6D151E; --wine-700: #591018; --wine-800: #430C12; --wine-900: #2E080C; --wine-950: #1D0507; /* ---------- NEUTROS — ink (matiz do vinho a 5%) ---------- */ --ink-0: #FFFFFF; --ink-50: #FAF8F7; --ink-100: #F3F0EE; --ink-200: #E7E3E1; --ink-300: #D4CFCE; --ink-400: #ABA3A3; --ink-500: #7A6E70; /* 4.62:1 sobre ink-50 — AA como texto muted */ --ink-600: #675D5E; --ink-700: #4C4546; --ink-800: #322D2D; --ink-900: #1F1C1C; --ink-950: #141212; --ink-1000: #0F0F11; --steel-300: #C9CDD4; --steel-500: #8B9099; --success-500: #2E7D5B; --warning-500: #B77A1B; --danger-500: #B4342C; /* ==================== SEMÂNTICA — CLARO (padrão) ==================== */ --page: var(--ink-1000); /* fundo atrás do shell */ --bg-primary: var(--ink-50); --bg-secondary: var(--ink-0); --bg-tertiary: var(--ink-100); --text-primary: var(--ink-1000); --text-secondary: var(--ink-600); --text-muted: var(--ink-500); --text-ghost: #948A8A; /* metade clara do título bicolor — 3.17:1, AA p/ texto grande */ --brand-primary: var(--wine-500); --brand-secondary: var(--wine-700); --brand-contrast: var(--ink-0); --border-default: rgba(15, 15, 17, 0.09); --border-hover: rgba(15, 15, 17, 0.18); --surface-glass: rgba(255, 255, 255, 0.70); /* ---------- CORES DO REDESIGN (amostradas do Figma) ---------- */ --hero-bg: #010101; /* = preto exato da hero-cad.webp: sem costura entre fundo e imagem */ --bloco-vinho-1: #7B1722; /* D3: gradiente do bloco orgânico */ --bloco-vinho-2: #57141B; --card-vinho: #841E29; /* D3: card 02 */ --card-escuro: #0A0D0B; /* D3: card 04 */ --barra-escura: #1F1C1C; /* D3: closing bar */ --fluxo-1: #7E1924; /* D6: gradiente do bloco de etapas */ --fluxo-2: #CF3748; --areia: #F3F0EE; /* D4: fundo do portfólio */ /* ---------- ESPAÇAMENTO — base 8px ---------- */ --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: 160px; /* ---------- TIPOGRAFIA ---------- Escala contida: 2 tamanhos de display e 3 de texto. Sem degraus intermediários — é isso que dá unidade à página. */ --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif; --fs-display: clamp(26px, 2.5vw, 36px); /* H1 do hero (36px em 1440, medido no Figma) */ --fs-h2: clamp(27px, 3.0vw, 42px); /* título de seção */ --fs-h3: clamp(18px, 1.45vw, 21px); /* título de card grande */ --fs-h4: 16px; /* título de card */ --fs-body: 15px; /* corpo */ --fs-sm: 13px; /* descrição de card */ --fs-label: 11px; /* pill, overline, meta */ --lh-display: 1.04; --lh-h2: 1.08; --lh-text: 1.55; /* ---------- RAIO ---------- */ --radius-shell: clamp(24px, 2.6vw, 40px); /* o card da página */ --radius-media: 28px; /* foto, player, palco */ --radius-card: 22px; /* card de conteúdo */ --radius-sm: 12px; --radius-pill: 999px; /* ---------- MOTION ---------- */ --duration-fast: 180ms; --duration-default: 320ms; --duration-slow: 620ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* hover de card: curva sem arranque, para o crescer parecer macio */ --duration-hover: 560ms; --ease-suave: cubic-bezier(0.33, 0.68, 0.28, 1); /* ---------- ELEVAÇÃO — sutil, como na referência ---------- */ --shadow-sm: 0 1px 2px rgba(15,15,17,.04), 0 4px 14px rgba(15,15,17,.04); --shadow-md: 0 6px 18px rgba(15,15,17,.06), 0 18px 42px rgba(15,15,17,.06); --shadow-lg: 0 14px 34px rgba(15,15,17,.10), 0 40px 80px rgba(15,15,17,.12); --shadow-wine: 0 12px 32px rgba(124,24,35,.26); /* ---------- Z-INDEX ---------- */ --z-sticky: 100; --z-bar: 120; /* ---------- LAYOUT ---------- */ --shell-pad: clamp(8px, 1vw, 16px); /* respiro do shell na tela */ --container: 1180px; --gutter: clamp(20px, 3.4vw, 60px); } /* ==================== SEÇÃO ESCURA (uso pontual) ==================== */ .band--dark { --bg-primary: var(--ink-1000); --bg-secondary: var(--ink-950); --bg-tertiary: var(--ink-900); --text-primary: var(--ink-0); --text-secondary: var(--ink-300); --text-muted: var(--ink-400); --text-ghost: rgba(255,255,255,.42); /* 4.10:1 sobre o off-black */ --brand-primary: var(--wine-400); --brand-secondary: var(--wine-300); --brand-contrast: var(--ink-0); --border-default: rgba(255, 255, 255, 0.11); --border-hover: rgba(255, 255, 255, 0.22); --surface-glass: rgba(255, 255, 255, 0.06); } /* ==================== SEÇÃO VINHO (bloco de marca) ==================== */ .band--wine { --bg-primary: var(--wine-500); --bg-secondary: var(--wine-600); --bg-tertiary: var(--wine-700); --text-primary: var(--ink-0); --text-secondary: var(--wine-100); --text-muted: var(--wine-200); --text-ghost: rgba(255,255,255,.52); /* 3.81:1 sobre o vinho */ --brand-primary: var(--ink-0); --brand-secondary: var(--wine-200); --brand-contrast: var(--wine-600); --border-default: rgba(255, 255, 255, 0.20); --border-hover: rgba(255, 255, 255, 0.34); --surface-glass: rgba(255, 255, 255, 0.10); }