186 lines
5.1 KiB
CSS
186 lines
5.1 KiB
CSS
:root {
|
|
/* Cores de marca */
|
|
--gold-500: #c9a13b;
|
|
--gold-400: #d9bc6b;
|
|
--gold-300: #e8d6a3;
|
|
--purple-600: #6c3ce0;
|
|
--purple-500: #7c4dff;
|
|
--purple-400: #9b74ff;
|
|
--purple-100: #efe8ff;
|
|
|
|
/* Tema escuro (padrão) */
|
|
--bg-canvas: #121017;
|
|
--bg-surface: #1a1721;
|
|
--bg-surface-raised: #221e2c;
|
|
--bg-sidebar: #16131c;
|
|
--bg-topbar: #16131c;
|
|
--border-subtle: #2c2836;
|
|
--text-primary: #f5f3f8;
|
|
--text-secondary: #a9a3b8;
|
|
--text-muted: #726c81;
|
|
--accent: var(--purple-500);
|
|
--accent-hover: var(--purple-400);
|
|
--accent-contrast: #ffffff;
|
|
--accent-rgb: 124, 77, 255;
|
|
--gold: var(--gold-400);
|
|
--gold-rgb: 217, 188, 107;
|
|
--teal: #2dd4bf;
|
|
--teal-rgb: 45, 212, 191;
|
|
--slate: #cbd5e1;
|
|
--slate-rgb: 203, 213, 225;
|
|
--coral: #fb923c;
|
|
--coral-rgb: 251, 146, 60;
|
|
--card-bg: #241f2e;
|
|
--card-bg-hover: #2c2638;
|
|
|
|
/* Sidebar é sempre escura, nos dois temas (identidade visual) — por isso
|
|
usa suas próprias cores fixas em vez de --text-*/--border-subtle, que
|
|
se invertem para servir o conteúdo claro/escuro. */
|
|
--sidebar-text-primary: #f5f3f8;
|
|
--sidebar-text-secondary: #a9a3b8;
|
|
--sidebar-text-muted: #726c81;
|
|
--sidebar-hover-bg: #221e2c;
|
|
--sidebar-border: #2c2836;
|
|
|
|
/* Card de login (index.html) é sempre escuro, nos dois temas — mesma lógica
|
|
da sidebar acima. Só o fundo da página ao redor do card (.login-page)
|
|
continua acompanhando o tema claro/escuro; o card em si (e tudo dentro
|
|
dele) usa estas cores fixas em vez de --bg-surface/--bg-canvas/--text-*,
|
|
que se invertem por tema. Não redefinir em :root[data-theme="light"]. */
|
|
--login-card-bg: #1a1721;
|
|
--login-field-bg: #121017;
|
|
--login-border: #2c2836;
|
|
--login-text-primary: #f5f3f8;
|
|
--login-text-secondary: #a9a3b8;
|
|
--login-text-muted: #726c81;
|
|
|
|
--overlay-scrim: rgba(10, 8, 14, 0.72);
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
|
|
--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
|
|
--shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
|
|
--danger: #e5484d;
|
|
--danger-rgb: 229, 72, 77;
|
|
|
|
--radius-sm: 8px;
|
|
--radius-md: 12px;
|
|
--radius-lg: 20px;
|
|
--radius-pill: 999px;
|
|
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 24px;
|
|
--space-6: 32px;
|
|
--space-7: 48px;
|
|
|
|
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
|
|
--sidebar-width: 264px;
|
|
--sidebar-width-collapsed: 76px;
|
|
--topbar-height: 64px;
|
|
|
|
--transition-fast: 150ms ease;
|
|
--transition-base: 220ms ease;
|
|
}
|
|
|
|
:root[data-theme="light"] {
|
|
--bg-canvas: #f3f1f7;
|
|
--bg-surface: #ffffff;
|
|
--bg-surface-raised: #ffffff;
|
|
--bg-sidebar: #1a1721;
|
|
--bg-topbar: #ffffff;
|
|
--border-subtle: #e4e0ec;
|
|
--text-primary: #211d2b;
|
|
--text-secondary: #5f5a6d;
|
|
--text-muted: #8b8598;
|
|
--accent: var(--purple-600);
|
|
--accent-hover: var(--purple-500);
|
|
--accent-contrast: #ffffff;
|
|
--accent-rgb: 108, 60, 224;
|
|
--gold: #b4872a;
|
|
--gold-rgb: 180, 135, 42;
|
|
--teal: #0d9488;
|
|
--teal-rgb: 13, 148, 136;
|
|
--slate: #475569;
|
|
--slate-rgb: 71, 85, 105;
|
|
--coral: #c2570a;
|
|
--coral-rgb: 194, 87, 10;
|
|
--card-bg: #ffffff;
|
|
--card-bg-hover: #f6f3fc;
|
|
--overlay-scrim: rgba(20, 16, 28, 0.55);
|
|
--shadow-sm: 0 1px 2px rgba(20, 16, 28, 0.08);
|
|
--shadow-md: 0 8px 24px rgba(20, 16, 28, 0.10);
|
|
--shadow-lg: 0 16px 40px rgba(20, 16, 28, 0.14);
|
|
|
|
/* Exceção deliberada ao "sidebar sempre congelada" (ver layout.css/CLAUDE.md): só
|
|
o texto/ícone do menu vira branco puro no tema claro, pedido explícito do
|
|
usuário pra melhorar a legibilidade — o fundo da sidebar continua escuro e
|
|
congelado nos dois temas, só essas três variáveis mudam aqui. */
|
|
--sidebar-text-primary: #ffffff;
|
|
--sidebar-text-secondary: #ffffff;
|
|
--sidebar-text-muted: #ffffff;
|
|
}
|
|
|
|
/* Temas de cor (independentes de claro/escuro) — "Roxo" é o padrão, já
|
|
definido acima; os demais só sobrescrevem --accent/--accent-hover/--accent-rgb. */
|
|
:root[data-color-theme="azul"] {
|
|
--accent: #3b82f6;
|
|
--accent-hover: #60a5fa;
|
|
--accent-rgb: 59, 130, 246;
|
|
}
|
|
|
|
:root[data-theme="light"][data-color-theme="azul"] {
|
|
--accent: #1d4ed8;
|
|
--accent-hover: #2563eb;
|
|
--accent-rgb: 29, 78, 216;
|
|
}
|
|
|
|
:root[data-color-theme="verde"] {
|
|
--accent: #22c55e;
|
|
--accent-hover: #4ade80;
|
|
--accent-rgb: 34, 197, 94;
|
|
}
|
|
|
|
:root[data-theme="light"][data-color-theme="verde"] {
|
|
--accent: #15803d;
|
|
--accent-hover: #16a34a;
|
|
--accent-rgb: 21, 128, 61;
|
|
}
|
|
|
|
:root[data-color-theme="ambar"] {
|
|
--accent: #f59e0b;
|
|
--accent-hover: #fbbf24;
|
|
--accent-rgb: 245, 158, 11;
|
|
}
|
|
|
|
:root[data-theme="light"][data-color-theme="ambar"] {
|
|
--accent: #b45309;
|
|
--accent-hover: #d97706;
|
|
--accent-rgb: 180, 83, 9;
|
|
}
|
|
|
|
:root[data-color-theme="rosa"] {
|
|
--accent: #ec4899;
|
|
--accent-hover: #f472b6;
|
|
--accent-rgb: 236, 72, 153;
|
|
}
|
|
|
|
:root[data-theme="light"][data-color-theme="rosa"] {
|
|
--accent: #be185d;
|
|
--accent-hover: #db2777;
|
|
--accent-rgb: 190, 24, 93;
|
|
}
|
|
|
|
:root[data-color-theme="vermelho"] {
|
|
--accent: #ef4444;
|
|
--accent-hover: #f87171;
|
|
--accent-rgb: 239, 68, 68;
|
|
}
|
|
|
|
:root[data-theme="light"][data-color-theme="vermelho"] {
|
|
--accent: #b91c1c;
|
|
--accent-hover: #dc2626;
|
|
--accent-rgb: 185, 28, 28;
|
|
}
|