/* * JundiPABX — design tokens. * * Paleta alinhada ao JundiBot (outro produto JundiTech) para dar * consistência de marca entre os dois painéis: neutros em slate, cor de * marca em azul, alternância clara/escura pela classe `dark` na * (não por `prefers-color-scheme`) — ver shared/js/theme.js. */ :root { /* Marca (azul) */ --jp-brand-50: #eef6ff; --jp-brand-100: #d9eaff; --jp-brand-300: #8fbcff; --jp-brand-500: #2b7fff; --jp-brand-600: #1c66db; --jp-brand-700: #1750ad; --jp-brand-800: #1e40af; --jp-brand-900: #1e3a8a; --jp-brand-950: #172554; /* Neutros (slate) */ --jp-slate-50: #f8fafc; --jp-slate-100: #f1f5f9; --jp-slate-200: #e2e8f0; --jp-slate-300: #cbd5e1; --jp-slate-400: #94a3b8; --jp-slate-500: #64748b; --jp-slate-600: #475569; --jp-slate-700: #334155; --jp-slate-800: #1e293b; --jp-slate-900: #0f172a; --jp-slate-950: #020617; /* Estado */ --jp-success-600: #15803d; --jp-success-100: #dcfce7; --jp-success-400: #4ade80; --jp-danger-600: #b91c1c; --jp-danger-100: #fee2e2; --jp-danger-400: #f87171; --jp-warning-600: #b45309; --jp-warning-100: #fef3c7; /* Superfícies — tema claro (padrão) */ --jp-bg: var(--jp-slate-50); --jp-surface: #ffffff; --jp-border: var(--jp-slate-200); --jp-text: var(--jp-slate-900); --jp-text-muted: var(--jp-slate-500); --jp-text-soft: var(--jp-slate-600); --jp-overlay: rgb(15 23 42 / 40%); --jp-hover: var(--jp-slate-100); /* Layout */ --jp-header-height: 56px; --jp-sidebar-width: 220px; --jp-radius-sm: 6px; --jp-radius-md: 10px; --jp-shadow-md: 0 4px 16px rgb(15 23 42 / 8%); --jp-shadow-lg: 0 12px 32px rgb(15 23 42 / 20%); --jp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color-scheme: light; } html.dark { --jp-bg: var(--jp-slate-950); --jp-surface: var(--jp-slate-900); --jp-border: var(--jp-slate-800); --jp-text: var(--jp-slate-100); --jp-text-muted: var(--jp-slate-400); --jp-text-soft: var(--jp-slate-300); --jp-overlay: rgb(0 0 0 / 60%); --jp-hover: var(--jp-slate-800); color-scheme: dark; }