/* ============================================================ MABUS DESIGN SYSTEM v2 — TOKENS (asymmetric theming) ------------------------------------------------------------ Premissa central: - Chrome (sidebar + header) SEMPRE escuro, em ambos os temas. - Conteúdo é claro em light, escuro em dark. - Brand: azul-violeta #4B3FE0 (ecoa o roxo do chrome). - Neutros com viés violeta 3-5° hue (coesão cromática global). - Semantic com glow gradients (cyan/violet/amber/emerald) — glow é codificação visual de fluxo, NÃO decoração. - Fonte: Geist (Vercel). Inter como fallback temporário. SSOT: views/data/theme-palette.json. Editar JSON E este CSS em sincronia. tailwind.config.js consome os mesmos valores. Naming: - --chrome-* : tokens do chrome (dark permanente) - --surface-* : superfícies do conteúdo (variam por tema) - --neutral-50..950 : escala global (viés violeta) - --brand-*, --cyan-*, --violet-*, --amber-*, --emerald-*, --rose-* : paleta semântica com solid/soft/glow - --mb-* : aliases legacy pra compat com CSS antigo ============================================================ */ /* === CHROME TOKENS (sempre escuro, em ambos os temas) === Vivem em :root porque NÃO mudam com data-theme. Graphite Slate #0E1325 — MESMO tom do tema dark. O user pediu "mesmo coração de cores" pra sidebar+topbar terem o mesmo esquema do dark. Brushed gold #B89A4C como accent (o marrom). Antes era violeta-preto #0F0B1A (v2 asymmetric), revertido em 2026-05-21. */ :root { --chrome-bg: #0E1325; --chrome-surface: #161C32; --chrome-border: #1F273E; --chrome-text: #E8EAEF; --chrome-text-muted: #6A748A; --chrome-text-active: #FFFFFF; --chrome-accent: #B89A4C; /* brushed gold (o marrom) */ --chrome-accent-glow: rgba(184, 154, 76, 0.5); } /* === NEUTRALS com viés violeta (3-5° hue) === Substitui Zinc neutro. Imperceptível isolado, transformador em conjunto. Conecta cromaticamente com chrome. */ :root { --neutral-50: #FBFAFC; --neutral-100: #F4F2F8; --neutral-200: #ECE9F2; --neutral-300: #DAD5E4; --neutral-400: #A89FBF; --neutral-500: #7C7295; --neutral-600: #5C5478; --neutral-700: #3F3858; --neutral-800: #252040; --neutral-900: #15112A; --neutral-950: #0F0B1A; /* = chrome-bg (mesmo tom) */ } /* === BRAND (azul-violeta — eco do chrome) === #4B3FE0 = CTA primary. #5B5BF0 = link/foco/ativo. */ :root { --brand-50: #EEF0FF; --brand-100: #DDE0FF; --brand-500: #5B5BF0; --brand-600: #4B3FE0; --brand-700: #3D2FCC; --brand-900: #1F1670; --brand-glow: radial-gradient(circle at 30% 0%, rgba(91, 91, 240, 0.18), transparent 60%); } /* === SEMANTIC com glow gradients === Cada cor: solid (texto/borda), soft (badge bg), glow (atmosfera). Significado fixo (não pode mudar): - Cyan = fluxo/novas/entrada - Violet = IA/match/PRO - Amber = prazo/atenção temporal - Emerald = dinheiro/positivo - Rose = erro/perda (SEM glow — erro não tem atmosfera) */ :root { --cyan-50: #E6FBFF; --cyan-100: #C2F5FF; --cyan-500: #06B6D4; --cyan-600: #0891B2; --cyan-700: #0E7490; --cyan-text: #0E5A75; --cyan-glow: radial-gradient(ellipse at 30% 0%, rgba(6, 182, 212, 0.22) 0%, rgba(6, 182, 212, 0.04) 50%, transparent 80%); --violet-50: #F5F0FF; --violet-100: #E9DCFF; --violet-500: #8B5CF6; --violet-600: #7C3AED; --violet-700: #6D28D9; --violet-text: #5B21B6; --violet-glow: radial-gradient(ellipse at 30% 0%, rgba(139, 92, 246, 0.22) 0%, rgba(139, 92, 246, 0.04) 50%, transparent 80%); --amber-50: #FFFAEB; --amber-100: #FEEFC7; --amber-500: #F59E0B; --amber-600: #D97706; --amber-700: #B45309; --amber-text: #92400E; --amber-glow: radial-gradient(ellipse at 30% 0%, rgba(245, 158, 11, 0.22) 0%, rgba(245, 158, 11, 0.04) 50%, transparent 80%); --emerald-50: #ECFDF5; --emerald-100: #D1FAE5; --emerald-500: #10B981; --emerald-600: #059669; --emerald-700: #047857; --emerald-text: #065F46; --emerald-glow: radial-gradient(ellipse at 30% 0%, rgba(16, 185, 129, 0.22) 0%, rgba(16, 185, 129, 0.04) 50%, transparent 80%); --rose-50: #FFF1F2; --rose-100: #FFE4E6; --rose-500: #F43F5E; --rose-600: #E11D48; --rose-700: #BE123C; --rose-text: #9F1239; } /* === TYPOGRAPHY (Geist) === Geist é variable font, desenhada por Vercel pra dashboards. Caráter geométrico levemente distintivo + tabular nums + cv11 (1 com serifa pra diferenciar de l). Inter fica como fallback. */ :root { --font-sans: "Geist", "Geist Variable", "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "Geist Mono", "JetBrains Mono", "SF Mono", Menlo, monospace; --font-display: var(--font-sans); --text-xs: 11px; --line-xs: 16px; --text-sm: 12px; --line-sm: 16px; --text-base: 13px; --line-base: 20px; --text-md: 14px; --line-md: 20px; --text-lg: 16px; --line-lg: 24px; --text-xl: 20px; --line-xl: 28px; --text-2xl: 24px; --line-2xl: 32px; --text-display: 36px; --line-display: 44px; } /* === SPACING (4px base) === */ :root { --space-0: 0; --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; } /* === BORDER RADIUS (subi um pouco pra combinar com personalidade dark) === */ :root { --radius-xs: 5px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 16px; --radius-full: 9999px; } /* === SHADOWS (viés violeta no preto da sombra — coesão global) === */ :root { --shadow-xs: 0 1px 2px rgba(15, 11, 26, 0.05); --shadow-sm: 0 1px 3px rgba(15, 11, 26, 0.08), 0 1px 2px rgba(15, 11, 26, 0.04); --shadow-md: 0 4px 12px -2px rgba(15, 11, 26, 0.1), 0 2px 4px rgba(15, 11, 26, 0.04); --shadow-lg: 0 12px 24px -8px rgba(15, 11, 26, 0.15), 0 4px 8px rgba(15, 11, 26, 0.06); --shadow-xl: 0 24px 48px -12px rgba(15, 11, 26, 0.25), 0 8px 16px rgba(15, 11, 26, 0.1); /* Sombras com glow brand pra elementos premium */ --shadow-brand: 0 8px 24px -8px rgba(91, 91, 240, 0.35); --shadow-emerald: 0 8px 24px -8px rgba(16, 185, 129, 0.3); } /* === MOTION === */ :root { --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-instant: 80ms; --duration-fast: 120ms; --duration-normal: 180ms; --duration-slow: 240ms; --duration-glow: 1600ms; } /* ============================================================ LIGHT THEME — content area clara ============================================================ */ [data-theme="mabus-light"] { /* ======================================================== TEMA FACILITADO — "Clareza Acolhedora" (conteúdo claro) -------------------------------------------------------- Aplicado SOBRE a arquitetura v2 (chrome/semantic/dark intocados). Conteúdo vira papel quente, tinta alto-contraste, marca azul calma, GLOW DESLIGADO. Pensado p/ público 40+: anti-futurismo, legibilidade > densidade. ======================================================== */ /* Surfaces — branco-frio Google. Canvas cinza-frio, cards brancos que FLUTUAM por sombra (não borda). Profundidade > "borderless". */ --surface-canvas: #F8F9FA; /* cinza-frio Google grey-50 */ --surface-default: #FFFFFF; /* cards branco puro */ --surface-sunken: #F1F3F4; /* sunken / seções grey-100 */ --surface-elevated: #FFFFFF; --surface-overlay: rgba(32, 33, 36, 0.50); /* scrim grey-900 */ /* Borders — quase ausentes (profundidade vem da SOMBRA). Hairline só quando precisa separar em fundo branco. */ --border-subtle: #ECEEF1; --border-default: #DADCE0; /* Google divider */ --border-strong: #BDC1C6; --border-focus: #1A73E8; /* azul Google */ /* Text — cinza-tinta Google (primary ≈ #202124, AAA) */ --text-primary: #202124; /* grey-900 */ --text-secondary: #5F6368; /* grey-700 */ --text-tertiary: #80868B; /* grey-600 */ --text-disabled: #BDC1C6; /* grey-400 */ /* === LEGACY ALIASES === */ --mb-canvas: var(--surface-canvas); --mb-surface-1: var(--surface-default); --mb-surface-3: var(--surface-sunken); --mb-surface-inset: #ECEEF1; --mb-surface-elevated: var(--surface-elevated); --mb-base-100: var(--mb-canvas); --mb-base-200: var(--mb-surface-3); --mb-base-300: var(--mb-surface-inset); --mb-surface-canvas: var(--mb-canvas); --mb-surface-glass: var(--mb-surface-1); --mb-surface-deep: var(--mb-surface-3); --mb-text-primary: var(--text-primary); --mb-text-secondary: var(--text-secondary); --mb-text-tertiary: var(--text-tertiary); --mb-text-disabled: var(--text-disabled); --mb-base-content: var(--mb-text-primary); --mb-base-content-muted: var(--mb-text-tertiary); --mb-ink: var(--text-primary); --mb-border-subtle: var(--border-subtle); --mb-border-default: var(--border-default); --mb-border-strong: var(--border-strong); --mb-glass-border: var(--border-default); /* Brand — azul de ação Google (#1A73E8). Sobrescreve --brand-* (violeta) SÓ no claro; dark mantém violeta. */ --brand-500: #1A73E8; --brand-600: #1A73E8; --brand-700: #1765CC; --mb-primary: #1A73E8; /* azul Google CTA */ --mb-primary-content: #FFFFFF; --mb-primary-hover: #1765CC; --mb-secondary: #5F6368; /* cinza Google */ --mb-secondary-content: #FFFFFF; --mb-accent: #B8860B; /* brushed gold (marca) */ --mb-accent-content: #FFFFFF; --mb-accent-hover: #9C7109; /* System states — cores Google, alto contraste c/ branco */ --mb-info: #1A73E8; --mb-info-content: #FFFFFF; --mb-success: #1E8E3E; /* Google green */ --mb-success-content: #FFFFFF; --mb-warning: #B06000; /* âmbar legível AAA */ --mb-warning-content: #FFFFFF; --mb-error: #D93025; /* Google red */ --mb-error-content: #FFFFFF; /* Sombras — neutras, suaves, difusas (Google/Material). SEM anel (o 0 0 0 1px antigo deixava tudo "mal circulado"). */ --mb-shadow-s: 0 1px 2px rgba(60,64,67,0.10), 0 1px 3px rgba(60,64,67,0.06); --mb-shadow-m: 0 1px 3px rgba(60,64,67,0.10), 0 4px 14px rgba(60,64,67,0.10); --mb-shadow-l: 0 4px 12px rgba(60,64,67,0.10), 0 14px 36px rgba(60,64,67,0.14); --mb-shadow-sm: var(--mb-shadow-s); --mb-shadow-md: var(--mb-shadow-m); --mb-shadow-lg: var(--mb-shadow-l); --mb-shadow-inset: inset 0 1px 2px rgba(60,64,67,0.10); --mb-glass: var(--surface-default); --mb-glass-elevated: var(--surface-elevated); --mb-highlight-top: rgba(255, 255, 255, 0.6); --mb-glow-inner: rgba(26, 115, 232, 0.05); --mb-ring: rgba(26, 115, 232, 0.40); /* CHROME CLARO — trilho CINZA-AZULADO nitidamente mais escuro que o canvas branco (#F8F9FA) → separa nav de conteúdo SEM pesar (escolha do usuário). Degrau claro: canvas 98% L → chrome ~92% L com viés azul. Item ativo = PILL AZUL CHEIO. Header usa o mesmo tom. Dark intocado. */ --chrome-bg: #E5E9F2; /* cinza-azulado (degrau nítido) */ --chrome-surface: #DCE1EE; /* hover (1 passo + fundo) */ --chrome-border: #D3D9E6; /* divisória do chrome */ --chrome-text: #4A4F57; /* tinta legível no tint */ --chrome-text-muted: #6B7280; --chrome-text-active: var(--mb-primary-content); /* texto branco no pill azul */ --chrome-accent: var(--mb-primary); --chrome-accent-glow: transparent; --mb-logo-invert: 0; /* === FACILITADO: GLOW OFF no claro (anti-futurismo) === Os glow gradients semânticos viram transparentes — sem "atmosfera" no conteúdo claro. Dark mantém os glows. */ --brand-glow: transparent; --cyan-glow: transparent; --violet-glow: transparent; --amber-glow: transparent; --emerald-glow: transparent; /* === FACILITADO: tipo um pouco maior (legibilidade 40+) === v2 usa px; subimos moderadamente só no claro. */ --text-sm: 13px; --line-sm: 18px; --text-base: 14.5px; --line-base: 22px; --text-md: 15.5px; --line-md: 22px; --text-lg: 17px; --line-lg: 26px; --text-xl: 21px; --line-xl: 30px; --text-2xl: 26px; --line-2xl: 34px; --text-display: 40px; --line-display: 48px; /* Moods preservados (recalibrados pra paleta quente) */ --mb-mood-feed-primary: #B5446A; /* magenta dessaturado quente */ --mb-mood-feed-secondary: #B8704F; /* terracotta cobre */ --mb-mood-premium: var(--mb-accent); /* ======================================================== CATEGORIAS MATERIAL (tonal containers) — só no claro. Cada família = container (fundo tint claro) + on (ícone/ texto saturado, AA+) + border (hairline tonal). Padrão Material 3: colorido E legível. Usado p/ categorizar cards, chips, métricas, ferramentas. Dark NÃO usa isto. ======================================================== */ --mb-cat-blue: #1967D2; --mb-cat-blue-container: #E8F0FE; --mb-cat-blue-border: #D2E3FC; --mb-cat-green: #1E8E3E; --mb-cat-green-container: #E6F4EA; --mb-cat-green-border: #CEEAD6; --mb-cat-amber: #E37400; --mb-cat-amber-container: #FEF7E0; --mb-cat-amber-border: #FEEFC3; --mb-cat-purple: #9334E6; --mb-cat-purple-container: #F3E8FD; --mb-cat-purple-border: #E9D2FB; --mb-cat-pink: #D01884; --mb-cat-pink-container: #FCE8F3; --mb-cat-pink-border: #F8D0E4; --mb-cat-teal: #00897B; --mb-cat-teal-container: #E0F2F1; --mb-cat-teal-border: #B2DFDB; --mb-cat-red: #D93025; --mb-cat-red-container: #FCE8E6; --mb-cat-red-border: #FAD2CF; } /* ============================================================ DARK THEME — Graphite Slate + Indigo Sóbrio + Brushed Gold ------------------------------------------------------------ RESTAURADO depois da v2 ter tentado virar violeta-preto: vocabulário Bloomberg redesenhado pela Linear. Brushed gold #B89A4C é o accent (o marrom) que dá personalidade ao tema — o user explicitamente ama. Indigo bright #6B7BE8 contrasta bem em canvas dark slate. Eixo neutro 250-260 sobrevive sRGB 70%. ============================================================ */ [data-theme="mabus-dark"], [data-theme="neuro"] { /* alias legacy */ /* Surfaces (conteúdo dark — Graphite Slate) */ --surface-canvas: oklch(14% 0.018 250); /* #0E1325 graphite slate */ --surface-default: oklch(18% 0.020 250); /* #161C32 cards */ --surface-sunken: oklch(11% 0.015 250); /* #0A0E1C sidebar dim */ --surface-elevated: oklch(20% 0.022 250); /* popovers/modals */ --surface-overlay: rgba(8, 12, 24, 0.75); /* Borders (color-mix com ink) */ --border-subtle: rgba(232, 234, 239, 0.10); --border-default: rgba(232, 234, 239, 0.16); --border-strong: rgba(232, 234, 239, 0.28); --border-focus: #6B7BE8; /* Text (off-white frio) */ --text-primary: oklch(94% 0.005 250); /* #E8EAEF */ --text-secondary: oklch(74% 0.015 250); /* #A8B0C0 */ --text-tertiary: oklch(54% 0.025 260); /* #6A748A */ --text-disabled: oklch(38% 0.020 260); /* #4A5266 */ /* Legacy aliases — base100/200/300, surface-canvas, etc */ --mb-canvas: var(--surface-canvas); --mb-surface-1: var(--surface-default); --mb-surface-3: var(--surface-sunken); --mb-surface-inset: oklch(9% 0.014 250); /* #080C18 inputs */ --mb-surface-elevated: var(--surface-elevated); --mb-base-100: var(--mb-canvas); --mb-base-200: var(--mb-surface-3); --mb-base-300: var(--mb-surface-inset); --mb-surface-canvas: var(--mb-canvas); --mb-surface-glass: var(--mb-surface-1); --mb-surface-deep: var(--mb-surface-3); --mb-text-primary: var(--text-primary); --mb-text-secondary: var(--text-secondary); --mb-text-tertiary: var(--text-tertiary); --mb-text-disabled: var(--text-disabled); --mb-base-content: var(--mb-text-primary); --mb-base-content-muted: var(--mb-text-tertiary); --mb-ink: var(--text-primary); --mb-border-subtle: var(--border-subtle); --mb-border-default: var(--border-default); --mb-border-strong: var(--border-strong); --mb-glass-border: var(--border-subtle); /* Brand — Indigo Sóbrio (bright em canvas dark slate) */ --mb-primary: #6B7BE8; /* indigo bright */ --mb-primary-content: #FFFFFF; --mb-primary-hover: #7E8DEC; --mb-secondary: #4A5C9E; /* indigo darker */ --mb-secondary-content: #FFFFFF; /* Accent: BRUSHED GOLD — o marrom que o user ama */ --mb-accent: #B89A4C; /* brushed gold claro */ --mb-accent-content: #0E1325; /* texto dark sobre gold */ --mb-accent-hover: #C8AA5C; /* System states (versões bright pra dark) */ --mb-info: #6B7BE8; --mb-info-content: #FFFFFF; --mb-success: #1FB87A; /* sage bright */ --mb-success-content: #FFFFFF; --mb-warning: #D4A24A; /* âmbar warm */ --mb-warning-content: #1F1300; --mb-error: #E84B5E; /* terracotta bright */ --mb-error-content: #FFFFFF; --mb-shadow-s: 0 1px 2px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(0, 0, 0, 0.20); --mb-shadow-m: 0 2px 4px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.45); --mb-shadow-l: 0 4px 8px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.50), 0 24px 56px rgba(0, 0, 0, 0.40); --mb-shadow-sm: var(--mb-shadow-s); --mb-shadow-md: var(--mb-shadow-m); --mb-shadow-lg: var(--mb-shadow-l); --mb-shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.40); --mb-glass: color-mix(in oklch, var(--mb-surface-1) 88%, transparent); --mb-glass-elevated: color-mix(in oklch, var(--mb-surface-elevated) 92%, transparent); --mb-highlight-top: rgba(255, 255, 255, 0.08); --mb-glow-inner: rgba(107, 123, 232, 0.06); --mb-ring: rgba(107, 123, 232, 0.40); --mb-logo-invert: 1; /* Moods preservados — calibrados pra Graphite Slate dark */ --mb-mood-feed-primary: #F72585; /* magenta vivo */ --mb-mood-feed-secondary: #FF6B35; /* orange */ --mb-mood-premium: var(--mb-accent); /* brushed gold */ } /* ============================================================ REDUCED MOTION — sempre respeitar ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* === Focus visible global (brand color) === */ :focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; border-radius: inherit; } /* === STATUS aliases (theme-agnostic — mantém compat) === */ :root { --mb-status-vencendo: var(--rose-600); --mb-status-em-breve: var(--amber-600); --mb-status-perdida: var(--neutral-500); --mb-status-novo: var(--emerald-600); } /* === LOGO ADAPTIVE === */ .logo-adaptive { filter: invert(var(--mb-logo-invert, 0)); transition: filter 200ms ease; } /* === TRANSITION POLICY — janela scoped pra evitar transitions globais === */ .theme-transitioning, .theme-transitioning *, .theme-transitioning *::before, .theme-transitioning *::after { transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, fill 200ms ease, stroke 200ms ease, box-shadow 200ms ease !important; } @media (prefers-reduced-motion: reduce) { .theme-transitioning, .theme-transitioning *, .theme-transitioning *::before, .theme-transitioning *::after { transition: none !important; } } /* ============================================================ ADAPTIVE DENSITY — auto-compactar em viewports menores ============================================================ */ @media (max-width: 1440px) { html { font-size: 14.5px; } } @media (max-width: 1280px) { html { font-size: 13.5px; } } @media (max-width: 1024px) { html { font-size: 15px; } } /* ============================================================ FACILITADO — CAMADA DE CLAREZA [só html[data-theme=mabus-light]] ------------------------------------------------------------ No claro, legibilidade > densidade: a tipografia NÃO encolhe em laptops (anula a densidade adaptativa acima via maior especificidade) e o foco é forte. Dark intocado. ============================================================ */ html[data-theme="mabus-light"] { font-size: 16.5px; } @media (max-width: 1280px) { html[data-theme="mabus-light"] { font-size: 16px; } } @media (max-width: 768px) { html[data-theme="mabus-light"] { font-size: 16px; } } [data-theme="mabus-light"] body { line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } [data-theme="mabus-light"] :focus-visible { outline: 3px solid var(--mb-ring, #1F4FA3); outline-offset: 2px; border-radius: 4px; }