/* ========================================================================== BlenderBR — Design Tokens Fonte de verdade para cores, tipografia, espaçamento e sombras. ========================================================================== */ :root { /* Paleta principal (definida no briefing) */ --color-primary: #2563EB; --color-primary-dark: #1E40AF; --color-success: #16A34A; --color-warning: #F59E0B; --color-error: #DC2626; /* Superfícies — tema claro */ --color-bg: #F8FAFC; --color-bg-alt: #F1F5F9; --color-card: #FFFFFF; --color-border: #E2E8F0; /* Texto — tema claro */ --color-text: #1E293B; --color-text-secondary: #64748B; --color-text-on-primary: #FFFFFF; /* Tipografia */ --font-display: 'Manrope', 'Segoe UI', sans-serif; --font-body: 'Inter', 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem; --fs-4xl: 3rem; /* Espaçamento (escala 4px) */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem; --sp-16: 4rem; --sp-24: 6rem; /* Raio e sombra */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08); --shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.12); /* Layout */ --container-max: 1200px; --header-h: 72px; /* Transições */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --transition-fast: 150ms var(--ease); --transition-base: 250ms var(--ease); } /* Tema escuro — ativado via [data-theme="dark"] no */ [data-theme="dark"] { --color-bg: #0F172A; --color-bg-alt: #111C33; --color-card: #16213C; --color-border: #263450; --color-text: #E2E8F0; --color-text-secondary: #94A3B8; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.45); }