/* ============================================================ ENTRELAÇOS DESIGN SYSTEM — Tokens · Light Edition v1 Variante clara para LPs comerciais e sistemas web/produtos Importar antes de qualquer outro CSS. ============================================================ */ :root { /* === ROXO (mesmas escalas do dark — coerência total) === */ --e-purple-50: #F4EDFC; --e-purple-100: #E5D4FA; --e-purple-200: #C9A7F4; --e-purple-300: #A878EC; --e-purple-400: #8B4FE0; --e-purple-500: #7427D4; --e-purple-600: #5C18B8; /* primário CTAs */ --e-purple-700: #470F94; /* italic em headlines */ --e-purple-800: #340970; --e-purple-900: #220552; --e-purple-950: #11022B; /* === FUNDOS LIGHT (dois ambientes) === */ --e-bg: #F4ECE0; /* CREAM ENTRELAÇOS — hero, manifesto, LP */ --e-bg-warm: #F4ECE0; /* alias semântico */ --e-bg-app: #F8F4FB; /* OFF-WHITE VIOLÁCEO — apps, dashboards */ --e-bg-alt: #FAF4EB; /* contraste suave dentro de seções cream */ --e-bg-elev: #FFFFFF; /* cards, painéis, elevações */ --e-bg-deep: #ECE0CC; /* footer, sections-âncora mais densas */ --e-bg-card: #FFFFFF; --e-bg-card-hover: #FFFFFF; --e-bg-input: #FFFFFF; --e-bg-overlay: rgba(244,236,224,0.92); /* === GLASS (header pill light) === */ --e-glass-bg: rgba(255,255,255,0.72); --e-glass-border: rgba(74,32,138,0.10); --e-glass-blur: blur(20px) saturate(160%); /* === DARK ZONES (inversões dentro do light) === A LP light pode ter UMA dobra escura, exatamente como a dark tem inversões cream. Mantém ritmo visual. */ --e-dark-zone: #220552; --e-dark-zone-elev: #340970; --e-text-on-dark: #F0EAF8; --e-text-on-dark-secondary: rgba(240,234,248,0.68); /* === TEXTO === */ --e-text: #11022B; /* roxo-950 — quase preto, mas com alma */ --e-text-secondary: rgba(17,2,43,0.72); --e-text-muted: rgba(17,2,43,0.50); --e-text-faint: rgba(17,2,43,0.30); /* Texto sobre roxo (CTAs, dark zones) */ --e-text-on-purple: #FFFFFF; --e-text-on-purple-secondary: rgba(255,255,255,0.78); /* Aliases legados (para reuso de componentes do dark) */ --e-text-on-cream: var(--e-text); --e-text-on-cream-secondary: var(--e-text-secondary); --e-text-on-cream-muted: var(--e-text-muted); /* === BORDAS === */ --e-border: rgba(74,32,138,0.10); /* hairline padrão */ --e-border-strong: rgba(74,32,138,0.18); /* hover, focus, divisores */ --e-border-subtle: rgba(17,2,43,0.06); --e-border-cream: rgba(74,32,138,0.10); /* alias legado */ --e-border-input: rgba(74,32,138,0.20); /* === ACENTO LARANJA — versão queimada para light === O #FF8A1F do dark fica berrante em fundo claro. Aqui usamos um terracota mais grave, mantendo regra de 3. */ --e-orange: #C75317; /* terracota queimado */ --e-orange-bright: #E26B1F; /* hover */ --e-orange-soft: #F0B488; /* fills sutis */ --e-orange-bg: rgba(199,83,23,0.08); --e-orange-glow: rgba(199,83,23,0.20); /* === SEMÂNTICAS (contrastes ajustados pra fundo claro) === */ --e-success: #047857; --e-warning: #B45309; --e-error: #B91C1C; /* === GRADIENTES === */ --e-grad-purple: linear-gradient(135deg, #7427D4 0%, #470F94 100%); --e-grad-cream: linear-gradient(180deg, #F4ECE0 0%, #ECE0CC 100%); --e-grad-warm-glow: radial-gradient(ellipse at 50% 0%, rgba(199,83,23,0.10) 0%, transparent 60%); --e-grad-purple-glow:radial-gradient(ellipse at 50% 0%, rgba(116,39,212,0.10) 0%, transparent 65%); --e-grad-hero: radial-gradient(ellipse at 50% 0%, rgba(116,39,212,0.10) 0%, transparent 65%); --e-grad-glow: radial-gradient(ellipse at center, rgba(168,120,236,0.10) 0%, transparent 60%); --e-grad-deep: linear-gradient(180deg, #220552 0%, #11022B 100%); --e-grad-butterfly: radial-gradient(ellipse at center, rgba(116,39,212,0.18) 0%, rgba(244,236,224,0) 70%); /* === SPACING (idêntico ao dark) === */ --e-s-1:4px; --e-s-2:8px; --e-s-3:12px; --e-s-4:16px; --e-s-5:20px; --e-s-6:24px; --e-s-8:32px; --e-s-10:40px; --e-s-12:48px; --e-s-16:64px; --e-s-20:80px; --e-s-24:96px; --e-s-32:128px; --e-section-y: 100px; --e-section-y-sm: 64px; --e-section-y-lg: 140px; /* === CONTAINER === */ --e-maxw: 1280px; --e-maxw-narrow: 920px; --e-maxw-text: 640px; /* === RAIO === */ --e-r-sm: 8px; --e-r-md: 12px; --e-r-lg: 16px; --e-r-xl: 20px; --e-r-2xl: 28px; --e-r-pill: 9999px; --e-r-input: 0px; /* === SOMBRAS — depth é cor, mas baixa opacidade no light === Combinamos hairline (border) + microsombra cinza-quente roxa. NUNCA preto puro. NUNCA sombra "drop-shadow SaaS genérico". */ --e-sh-sm: 0 1px 2px rgba(74,32,138,0.04), 0 1px 3px rgba(74,32,138,0.05); --e-sh-md: 0 2px 6px rgba(74,32,138,0.05), 0 8px 20px rgba(74,32,138,0.07); --e-sh-lg: 0 4px 10px rgba(74,32,138,0.06), 0 24px 40px rgba(74,32,138,0.10); --e-sh-purple: 0 4px 14px rgba(116,39,212,0.18); --e-sh-purple-lg: 0 12px 30px rgba(116,39,212,0.22); --e-sh-glow: 0 0 50px rgba(168,120,236,0.14); --e-sh-cta: inset 0 0 0 1px rgba(255,255,255,0.15), 0 6px 20px rgba(116,39,212,0.28); --e-sh-cta-hover: inset 0 0 0 1px rgba(255,255,255,0.20), 0 12px 30px rgba(116,39,212,0.36); --e-sh-card: 0 1px 2px rgba(74,32,138,0.05), inset 0 0 0 1px rgba(74,32,138,0.04); --e-sh-card-hover:0 12px 30px -8px rgba(116,39,212,0.18), inset 0 0 0 1px rgba(74,32,138,0.10); --e-sh-nav: 0 4px 24px rgba(74,32,138,0.08), inset 0 0 0 1px rgba(74,32,138,0.06); --e-sh-focus: 0 0 0 3px rgba(116,39,212,0.18); /* === MOTION (idêntico — a curva é a alma) === */ --e-ease: cubic-bezier(0.22, 1, 0.36, 1); --e-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --e-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --e-ease-in-out: cubic-bezier(0.40, 0, 0.20, 1); --e-dur-fast: 150ms; --e-dur-base: 300ms; --e-dur-slow: 600ms; --e-dur-xslow: 1200ms; /* === FONTES === */ --ff-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif; --ff-serif: 'Instrument Serif', 'Times New Roman', serif; --ff-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace; }