/* ============================================================================== DESIGN TOKENS — VÉRTICE DATA / DATA BOUTIQUE DESIGN SYSTEM Base cromática, tipografia, elevação, grid e variáveis semânticas ============================================================================== */ :root { /* Paleta de Cores - Superfícies & Fundos */ --color-bg-main: #070B14; --color-bg-surface: #0E1526; --color-bg-card: rgba(19, 28, 49, 0.7); --color-bg-card-hover: rgba(28, 41, 70, 0.85); --color-bg-elevated: #131C31; --color-bg-input: rgba(14, 21, 38, 0.85); /* Acentos de Marca (DVRA — Violeta, Azul & Ciano Elétrico) */ --color-brand-purple: #8B5CF6; --color-brand-purple-dark: #6D28D9; --color-brand-purple-glow: rgba(139, 92, 246, 0.4); --color-brand-blue: #3B82F6; --color-brand-blue-glow: rgba(59, 130, 246, 0.35); --color-brand-cyan: #00D2FF; --color-brand-cyan-glow: rgba(0, 210, 255, 0.35); --color-brand-emerald: #10B981; --color-brand-emerald-glow: rgba(16, 185, 129, 0.3); --color-brand-amber: #F59E0B; /* Gradientes de Assinatura DVRA */ --grad-brand: linear-gradient(135deg, #8B5CF6 0%, #3B82F6 50%, #00D2FF 100%); --grad-brand-alt: linear-gradient(135deg, #7B5CFF 0%, #3B82F6 100%); --grad-brand-rev: linear-gradient(135deg, #00D2FF 0%, #3B82F6 50%, #8B5CF6 100%); --grad-emerald: linear-gradient(135deg, #10B981 0%, #00D2FF 100%); --grad-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 100%); --grad-glow: radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.22) 0%, rgba(0, 210, 255, 0.06) 45%, transparent 70%); /* Textos & Contraste */ --color-text-primary: #F8FAFC; --color-text-secondary: #94A3B8; --color-text-muted: #64748B; --color-text-highlight: #38BDF8; --color-logo-text: #F8FAFC; --color-logo-subtitle: #E2E8F0; /* Bordas & Divisores */ --border-subtle: rgba(255, 255, 255, 0.08); --border-medium: rgba(255, 255, 255, 0.14); --border-glow: rgba(139, 92, 246, 0.35); --border-focus: #8B5CF6; --grid-line-color: rgba(255, 255, 255, 0.025); --header-scrolled-bg: rgba(7, 11, 20, 0.88); --header-scrolled-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); /* Tipografia */ --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* Escala Tipográfica Fluida */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: clamp(2rem, 3.5vw, 2.75rem); --text-5xl: clamp(2.5rem, 5vw, 3.75rem); /* Espaçamentos */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; /* Raios de Arredondamento */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* Sombras & Elevação (Glassmorphism & Depth) */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2); --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.5), 0 0 1px 1px rgba(255, 255, 255, 0.05) inset; --shadow-card-hover: 0 20px 40px -12px rgba(139, 92, 246, 0.25), 0 0 1px 1px rgba(0, 210, 255, 0.3) inset; --shadow-glow: 0 0 28px rgba(139, 92, 246, 0.38); /* Transições & Timings */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-smooth: 400ms cubic-bezier(0.16, 1, 0.3, 1); /* Layout Container */ --container-max: 1240px; --container-narrow: 840px; } /* ============================================================================== TEMA CLARO (NORMAL / LIGHT MODE) Ativado via atributo data-theme="light" no ============================================================================== */ [data-theme="light"] { /* Paleta de Cores - Superfícies & Fundos */ --color-bg-main: #F8FAFC; --color-bg-surface: #FFFFFF; --color-bg-card: rgba(255, 255, 255, 0.92); --color-bg-card-hover: #FFFFFF; --color-bg-elevated: #F1F5F9; --color-bg-input: #FFFFFF; /* Acentos de Marca para Fundo Claro */ --color-brand-purple: #7C3AED; --color-brand-purple-dark: #5B21B6; --color-brand-purple-glow: rgba(124, 58, 237, 0.25); --color-brand-blue: #2563EB; --color-brand-blue-glow: rgba(37, 99, 235, 0.2); --color-brand-cyan: #0284C7; --color-brand-cyan-glow: rgba(2, 132, 199, 0.2); --color-brand-emerald: #059669; --color-brand-emerald-glow: rgba(5, 150, 105, 0.2); --color-brand-amber: #D97706; /* Gradientes de Ação */ --grad-brand: linear-gradient(135deg, #7C3AED 0%, #2563EB 50%, #0284C7 100%); --grad-brand-alt: linear-gradient(135deg, #6D28D9 0%, #2563EB 100%); --grad-surface: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0) 100%); --grad-glow: radial-gradient(circle at 50% 0%, rgba(124, 58, 237, 0.12) 0%, rgba(2, 132, 199, 0.04) 50%, transparent 70%); /* Textos & Contraste */ --color-text-primary: #0F172A; --color-text-secondary: #475569; --color-text-muted: #64748B; --color-text-highlight: #0284C7; --color-logo-text: #0F172A; --color-logo-subtitle: #1E293B; /* Bordas & Divisores */ --border-subtle: rgba(15, 23, 42, 0.08); --border-medium: rgba(15, 23, 42, 0.15); --border-glow: rgba(124, 58, 237, 0.3); --border-focus: #7C3AED; /* Sombras Suaves */ --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06); --shadow-card: 0 4px 20px -4px rgba(15, 23, 42, 0.08), 0 0 1px 1px rgba(15, 23, 42, 0.04); --shadow-card-hover: 0 16px 36px -10px rgba(124, 58, 237, 0.16), 0 0 1px 1px rgba(124, 58, 237, 0.2); --shadow-glow: 0 0 24px rgba(124, 58, 237, 0.18); /* Elementos Estruturais */ --grid-line-color: rgba(15, 23, 42, 0.035); --header-scrolled-bg: rgba(255, 255, 255, 0.92); --header-scrolled-shadow: 0 4px 20px rgba(15, 23, 42, 0.06); }