/* ============================================================ LUMI DESIGN SYSTEM — TOKENS Versão 1.0 · Tema: Dark (base) Gerado a partir de LUMI_DESIGN_SYSTEM.md — não editar valores aqui sem atualizar o documento fonte. ============================================================ */ /* Fontes via Google Fonts (ver no ) */ :root, :root[data-theme="dark"] { /* ---------- Cor — núcleo de marca ---------- */ --lumi-bg: #14151D; --lumi-surface-1: #1E2028; --lumi-surface-2: #23252F; --lumi-surface-3: #2A2C38; --lumi-border: rgba(255,255,255,0.10); --lumi-border-strong: rgba(255,255,255,0.18); --lumi-divider: rgba(255,255,255,0.06); --lumi-text-primary: #F5F6F9; --lumi-text-secondary: #A6AAB6; --lumi-text-tertiary: #6E7280; --lumi-text-disabled: #4A4D58; --lumi-primary: #4F5FE8; --lumi-primary-hover: #6472ED; --lumi-primary-active: #3D4CD1; --lumi-cyan: #6FD9EA; --lumi-violet: #B583E0; --lumi-gradient-brand: linear-gradient(120deg, var(--lumi-primary) 0%, var(--lumi-cyan) 55%, var(--lumi-violet) 100%); --lumi-gradient-text: linear-gradient(100deg, #FFFFFF 0%, #CFE0FF 45%, #B9EAF5 100%); /* ---------- Cor — semântica ---------- */ --lumi-success: #4FC9A8; --lumi-success-bg: rgba(79,201,168,0.12); --lumi-info: #5B9EE0; --lumi-info-bg: rgba(91,158,224,0.12); --lumi-warning: #F0A947; --lumi-warning-bg: rgba(240,169,71,0.12); --lumi-error: #E5484D; --lumi-error-bg: rgba(229,72,77,0.12); /* ---------- Data viz ---------- */ --chart-1: var(--lumi-primary); --chart-2: var(--lumi-cyan); --chart-3: var(--lumi-violet); --chart-4: var(--lumi-success); --chart-5: var(--lumi-info); /* ---------- Tipografia ---------- */ --font-display: "Sora", ui-sans-serif, system-ui, sans-serif; --font-body: "Inter Tight", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-6xl: 3.75rem; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.25; --leading-snug: 1.375; --leading-relaxed: 1.625; /* ---------- Espaçamento ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* ---------- Raio ---------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 22px; --radius-full: 999px; /* ---------- Sombra ---------- */ --shadow-sm: 0 2px 8px -4px rgba(0,0,0,0.5); --shadow-md: 0 12px 32px -12px rgba(0,0,0,0.6); --shadow-elevated: 0 30px 80px -40px rgba(0,0,0,0.9); --shadow-glow: 0 0 0 1px var(--lumi-primary), 0 30px 90px -40px var(--lumi-primary); /* ---------- Blur ---------- */ --blur-sm: 8px; --blur-md: 16px; --blur-lg: 40px; /* ---------- Z-index ---------- */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; /* ---------- Breakpoints (uso em JS/comentário — CSS não lê var em @media) ---------- */ --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; /* ---------- Motion ---------- */ --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; --duration-ambient: 5500ms; --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* ---------- Aliases semânticos (indireção p/ multi-tema) ---------- */ --color-bg: var(--lumi-bg); --color-surface: var(--lumi-surface-1); --color-surface-2: var(--lumi-surface-2); --color-surface-3: var(--lumi-surface-3); --color-border: var(--lumi-border); --color-text: var(--lumi-text-primary); --color-text-secondary: var(--lumi-text-secondary); /* ---------- Reserva mascote (não implementado) ---------- */ --mascot-size-sm: 24px; --mascot-size-md: 40px; --mascot-size-lg: 96px; } /* Reservado para temas futuros — não ativos ainda. Basta redefinir os aliases --color-* acima em cada bloco para trocar de tema sem tocar em nenhum componente. */ :root[data-theme="light"] { } :root[data-theme="amoled"] { } :root[data-theme="high-contrast"] { } /* ============================================================ ANIMAÇÕES — assinatura de movimento da marca Regra: somente transform e opacity (aceleração por GPU) ============================================================ */ @keyframes lumi-sheen { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } } @keyframes lumi-gradient-drift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes lumi-ripple { 0% { opacity: 0.3; transform: scale(0); } 100% { opacity: 0; transform: scale(1); } } @keyframes caret-blink { 0%, 70%, 100% { opacity: 1; } 20%, 50% { opacity: 0; } } @keyframes lumi-rise { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes lumi-pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @media (prefers-reduced-motion: reduce) { .lumi-anim-ambient { animation: none !important; } }