/* ============================================ DESIGN TOKENS - ILPI Lucrativa Premium Design System | W3C DTCG Format ============================================ */ :root { /* --- CORES PRIMARIAS (70% da pagina) --- */ --color-azul-profundo: #0B1F3E; --color-azul-escuro: #071428; --color-azul-medio: #0F2847; --color-azul-claro: #162F52; --color-azul-accent: #1A3A66; /* --- ACCENT / DOURADO (10% da pagina) --- */ --color-dourado: #C6A75E; --color-dourado-claro: #E5C97A; --color-dourado-hover: #D4B86A; --color-dourado-pressed: #B8984E; --color-dourado-sutil: rgba(198, 167, 94, 0.12); --color-dourado-borda: rgba(198, 167, 94, 0.25); --color-dourado-glow: rgba(198, 167, 94, 0.35); --color-dourado-micro: rgba(198, 167, 94, 0.06); /* --- GRADIENTES DOURADOS --- */ --gradient-dourado: linear-gradient(135deg, #C6A75E 0%, #E5C97A 45%, #D4B86A 100%); --gradient-dourado-rich: linear-gradient(135deg, #B8984E 0%, #C6A75E 25%, #E5C97A 50%, #D4B86A 75%, #C6A75E 100%); --gradient-dourado-text: linear-gradient(135deg, #E5C97A 0%, #C6A75E 50%, #E5C97A 100%); --gradient-dourado-border: linear-gradient(135deg, rgba(198, 167, 94, 0.5) 0%, rgba(229, 201, 122, 0.2) 50%, rgba(198, 167, 94, 0.5) 100%); --gradient-dourado-shine: linear-gradient(105deg, transparent 40%, rgba(229, 201, 122, 0.15) 45%, rgba(229, 201, 122, 0.25) 50%, rgba(229, 201, 122, 0.15) 55%, transparent 60%); /* --- NEUTRAS (20% da pagina) --- */ --color-branco-puro: #FFFFFF; --color-branco-off: #F5F5F0; --color-cinza-claro: #E8E8E3; --color-cinza-texto: #A0A0A0; --color-cinza-sutil: rgba(255, 255, 255, 0.06); /* --- SEMANTICAS --- */ --color-sucesso: #2ECC71; --color-erro: #E74C3C; --color-erro-bg: rgba(231, 76, 60, 0.12); --color-info: #3498DB; --color-alerta-urgencia: #FF6B6B; /* --- OVERLAYS --- */ --color-overlay-azul: rgba(11, 31, 62, 0.92); --color-form-glass: rgba(255, 255, 255, 0.03); --color-glass-border: rgba(255, 255, 255, 0.08); /* --- GRADIENTES DE FUNDO PREMIUM --- */ --gradient-hero: radial-gradient(ellipse 80% 60% at 50% 40%, #162F52 0%, #0B1F3E 50%, #071428 100%); --gradient-hero-overlay: linear-gradient(180deg, rgba(7, 20, 40, 0) 0%, rgba(7, 20, 40, 0.6) 100%); --gradient-section-dark: linear-gradient(180deg, #071428 0%, #0B1F3E 50%, #071428 100%); --gradient-section-subtle: linear-gradient(165deg, #0B1F3E 0%, #0F2847 50%, #0B1F3E 100%); --gradient-cta-bg: radial-gradient(ellipse 70% 50% at 50% 50%, #162F52 0%, #0B1F3E 60%, #071428 100%); --gradient-card: linear-gradient(165deg, rgba(22, 47, 82, 0.6) 0%, rgba(15, 40, 71, 0.3) 100%); --gradient-card-hover: linear-gradient(165deg, rgba(22, 47, 82, 0.8) 0%, rgba(15, 40, 71, 0.5) 100%); /* --- TIPOGRAFIA --- */ --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* --- ESPACAMENTO (generoso = premium) --- */ --space-3xs: 0.125rem; --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4.5rem; --space-4xl: 6rem; --space-5xl: 8rem; --space-6xl: 10rem; /* --- BORDER RADIUS --- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 100px; /* --- SOMBRAS EM CAMADAS (Stripe-style depth) --- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.04); --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.08), 0 16px 48px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.04); --shadow-2xl: 0 16px 32px rgba(0, 0, 0, 0.10), 0 32px 80px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.06); /* --- SOMBRAS DOURADAS --- */ --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.08); --shadow-card-hover: 0 8px 16px rgba(0, 0, 0, 0.10), 0 20px 48px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(198, 167, 94, 0.15); --shadow-cta: 0 4px 12px rgba(198, 167, 94, 0.25), 0 2px 4px rgba(198, 167, 94, 0.15); --shadow-cta-hover: 0 8px 24px rgba(198, 167, 94, 0.35), 0 4px 8px rgba(198, 167, 94, 0.20), 0 0 48px rgba(198, 167, 94, 0.10); --shadow-cta-active: 0 2px 6px rgba(198, 167, 94, 0.20), 0 1px 2px rgba(198, 167, 94, 0.15); --shadow-mockup: 0 20px 40px rgba(0, 0, 0, 0.20), 0 40px 80px rgba(198, 167, 94, 0.08); --shadow-glow-gold: 0 0 20px rgba(198, 167, 94, 0.15), 0 0 40px rgba(198, 167, 94, 0.08); --shadow-glow-gold-strong: 0 0 24px rgba(198, 167, 94, 0.25), 0 0 60px rgba(198, 167, 94, 0.12), 0 0 100px rgba(198, 167, 94, 0.06); /* --- SOMBRAS DE INPUT --- */ --shadow-input-focus: 0 0 0 3px rgba(198, 167, 94, 0.12), 0 0 16px rgba(198, 167, 94, 0.08); --shadow-input-error: 0 0 0 3px rgba(231, 76, 60, 0.12), 0 0 12px rgba(231, 76, 60, 0.06); /* --- BORDAS PREMIUM --- */ --border-subtle: 1px solid rgba(198, 167, 94, 0.15); --border-medium: 1px solid rgba(198, 167, 94, 0.25); --border-strong: 1px solid rgba(198, 167, 94, 0.40); --border-glass: 1px solid rgba(255, 255, 255, 0.08); --border-glow: 1px solid rgba(198, 167, 94, 0.30); /* --- GLASSMORPHISM --- */ --glass-bg: rgba(11, 31, 62, 0.60); --glass-bg-light: rgba(255, 255, 255, 0.03); --glass-blur: blur(16px); --glass-blur-heavy: blur(24px); --glass-border: 1px solid rgba(255, 255, 255, 0.08); /* --- BACKDROP BLUR --- */ --blur-sm: blur(4px); --blur-md: blur(8px); --blur-lg: blur(16px); --blur-xl: blur(24px); /* --- TRANSICOES --- */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1); --transition-reveal: 700ms cubic-bezier(0.16, 1, 0.3, 1); --transition-premium: 500ms cubic-bezier(0.16, 1, 0.3, 1); --transition-bounce: 600ms cubic-bezier(0.34, 1.56, 0.64, 1); /* --- Z-INDEX --- */ --z-base: 1; --z-card: 10; --z-sticky: 100; --z-overlay: 500; --z-modal: 1000; --z-toast: 1100; }