/* ============================================================ MABUS THEME TOKENS v2 ------------------------------------------------------------ Single source of truth for color tokens across light & dark. Bus-factor = 1: edit this file to change the entire system. Naming: --mb-{role}[-{variant}] - mb prefix avoids collision with daisyUI's css vars (--p, --b1, etc) - role = base-100/200/300, primary, accent, info, success... - DaisyUI themes (mabus-light/mabus-dark) reference these via tailwind.config.js daisyui.themes config. Editing rules: 1. Always provide BOTH light and dark for any new token. 2. WCAG AA minimum on text-over-surface: 4.5:1 (normal), 3:1 (large/UI). 3. Never #FFFFFF or #000000 for backgrounds (eye strain). 4. Use HSL/OKLCH thinking, not memorized hex. Adjust lightness to keep contrast across themes. ============================================================ */ /* === LIGHT — AI Studio Pearl (Gemini-inspired) === Reset definitivo: esquece champagne/bege. Paleta "AI Studio" com tints frios pearl + acentos Gemini brand (azul/verde/ amarelo/vermelho) + acento principal Google Blue. Inspiração: Gemini chat interface, Material Design 3, AI Studio canvas. Características: - Off-white frio (não warm) com hint de azul subliminal - Texto Google-black #1F1F1F (não espresso warm) - CTAs Google Blue #1A73E8 (vibrante AI) - Accent Google Yellow #FBBC04 (brand match Gemini) - Sombras COOL (não warm) — rgba(20, 30, 50, X) - Aurora orbs: blue-pearl, green-pearl, lavender, cream-yellow */ [data-theme="mabus-light"] { /* === Surface system 5-tier — AI Studio Pearl === */ --mb-base-100: #F7F8FA; /* CANVAS — pearl frio (Gemini bg) */ --mb-base-200: #EDEEF1; /* DEEP — sidebar (harmônica) */ --mb-base-300: #E5E7EB; /* INSET — inputs */ --mb-surface-canvas: #F7F8FA; --mb-surface-glass: rgba(252, 253, 255, 0.78); /* GLASS pearl */ --mb-surface-elevated: rgba(255, 255, 255, 0.94); --mb-surface-deep: #EDEEF1; --mb-surface-inset: #E5E7EB; --mb-base-content: #1F1F1F; /* Google black */ --mb-base-content-muted: #6B7280; /* Tailwind slate-500 (contraste ~7:1) */ /* Inner highlight — translúcido branco-pearl */ --mb-highlight-top: rgba(255, 255, 255, 0.85); /* Inner glow — frio (cyan-pearl) em vez de champagne warm */ --mb-glow-inner: rgba(26, 115, 232, 0.04); /* 30% — secondary surfaces */ --mb-neutral: #9CA3AF; --mb-neutral-content: #FFFFFF; /* 10% — accent (Google Brand colors) */ --mb-primary: #1A73E8; /* Google Blue — CTAs */ --mb-primary-content: #FFFFFF; --mb-secondary: #5C6BC0; /* Indigo soft */ --mb-secondary-content: #FFFFFF; --mb-accent: #FBBC04; /* Google Yellow — destaques */ --mb-accent-content: #1F1F1F; /* texto preto sobre amarelo */ /* sistema (estados) — Google brand */ --mb-info: #1A73E8; --mb-info-content: #FFFFFF; --mb-success: #34A853; /* Google Green */ --mb-success-content: #FFFFFF; --mb-warning: #FBBC04; /* Google Yellow */ --mb-warning-content: #1F1F1F; --mb-error: #EA4335; /* Google Red */ --mb-error-content: #FFFFFF; /* === SHADOW STACK COOL (não warm) === */ --mb-glass: rgba(252, 253, 255, 0.78); --mb-glass-elevated: rgba(255, 255, 255, 0.94); --mb-glass-border: rgba(60, 64, 67, 0.08); --mb-shadow-sm: 0 1px 2px rgba(20, 30, 50, 0.06), inset 0 1px 0 var(--mb-highlight-top); --mb-shadow-md: 0 1px 2px rgba(20, 30, 50, 0.06), 0 4px 16px rgba(20, 30, 50, 0.08), inset 0 1px 0 var(--mb-highlight-top), inset 0 0 32px var(--mb-glow-inner); --mb-shadow-lg: 0 1px 2px rgba(20, 30, 50, 0.06), 0 8px 24px rgba(20, 30, 50, 0.10), 0 16px 48px rgba(20, 30, 50, 0.08), inset 0 1px 0 var(--mb-highlight-top), inset 0 0 48px var(--mb-glow-inner); --mb-shadow-inset: inset 0 1px 3px rgba(20, 30, 50, 0.08); --mb-ring: rgba(26, 115, 232, 0.25); /* moods preservados — adaptados pra paleta cool */ --mb-mood-feed-primary: #EC4899; /* pink Tinder */ --mb-mood-feed-secondary: #F97316; /* orange */ --mb-mood-premium: #FBBC04; /* Google Yellow */ /* logo / brand assets */ --mb-logo-invert: 0; } /* === DARK (Apple-base + Mabus neon) === */ [data-theme="mabus-dark"], [data-theme="neuro"] { /* alias: 'neuro' = legacy default, mapeado pro dark */ --mb-base-100: #1C1C1E; --mb-base-200: #2C2C2E; --mb-base-300: #3A3A3C; --mb-base-content: #F2F2F7; --mb-base-content-muted: #98989D; --mb-neutral: #98989D; --mb-neutral-content: #1C1C1E; --mb-primary: #00F0FF; /* cyan neon Mabus */ --mb-primary-content: #001A1F; --mb-secondary: #30D158; --mb-secondary-content: #00200F; --mb-accent: #FFD700; /* dourado neon */ --mb-accent-content: #1F1700; --mb-info: #0A84FF; --mb-info-content: #FFFFFF; --mb-success: #30D158; --mb-success-content: #00200F; --mb-warning: #FF9F0A; --mb-warning-content: #1F1300; --mb-error: #FF453A; --mb-error-content: #FFFFFF; --mb-glass: rgba(28, 28, 30, 0.72); --mb-glass-border: rgba(255, 255, 255, 0.08); --mb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --mb-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --mb-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6); --mb-ring: rgba(0, 240, 255, 0.3); --mb-mood-feed-primary: #F72585; --mb-mood-feed-secondary: #FF6B35; --mb-mood-premium: #FFD700; /* logo SVG é preto: inverte pra branco em fundo escuro */ --mb-logo-invert: 1; } /* === STATUS aliases (theme-agnostic) === */ :root { --mb-status-vencendo: var(--mb-error, #B91C1C); --mb-status-em-breve: var(--mb-warning, #B45309); --mb-status-perdida: var(--mb-base-content-muted, #6E6E73); --mb-status-novo: var(--mb-success, #047857); } /* === LOGO ADAPTIVE === Aplicado em . Inverte o SVG preto pra branco em dark, mantém preto em light. Vive aqui (não só em input.css/output.css) porque as telas públicas (head_public.ejs / home_public.ejs) só carregam theme-tokens.css standalone, sem output.css. ============================================================ */ .logo-adaptive { filter: invert(var(--mb-logo-invert, 0)); transition: filter 200ms ease; } /* === TRANSITION POLICY === Apenas durante a janela de troca (classe scoped por theme-controller.js), evita aplicar transition em todos os renders. Respeita prefers-reduced-motion. */ .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 ------------------------------------------------------------ Standard pattern (Apple Finder Compact/Regular). Como todo CSS da plataforma usa rem, reduzir font-size base do encolhe tudo proporcionalmente — equivalente a zoom-out automático. 1366x768 (laptop padrão) → font-size 14.5px ≈ zoom 91% < 1280px → font-size 13.5px ≈ zoom 85% Resultado: sistema deixa de exigir zoom manual em telas menores. Mobile (<=1024) volta a 15px pra acessibilidade tátil. ============================================================ */ @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; } }