/** * Sistema de Temas — CSS Custom Properties * Cada tema define suas variaveis, aplicadas via data-theme no * * Alem das cores (por tema), este arquivo define os TOKENS DE ESCALA * (tipografia e espacamento), que sao globais e independentes de tema. */ /* ============================== TOKENS DE ESCALA (globais, valem para todos os temas) Tipografia: escala curta em rem (16px base) — fora dela, nada. Regra: nenhum font-size novo fora destes tokens (auditoria 2026-07-06, docs/auditoria-design-elevenlabs-2026-07-06.md). ============================== */ :root { /* Tipografia */ --text-2xs: 0.6875rem; /* 11px — micro-rotulos, badges densos */ --text-xs: 0.75rem; /* 12px — meta, labels, sidebar */ --text-sm: 0.8125rem; /* 13px — texto secundario, celulas */ --text-base: 0.875rem; /* 14px — corpo padrao */ --text-md: 1rem; /* 16px — inputs (evita zoom iOS) */ --text-lg: 1.125rem; /* 18px — subtitulo, card-title destaque */ --text-xl: 1.25rem; /* 20px — titulo de secao */ --text-2xl: 1.5rem; /* 24px — titulo de pagina */ --text-3xl: 1.75rem; /* 28px — hero/KPI grande */ /* Alturas de linha */ --leading-tight: 1.25; --leading-normal: 1.5; /* Espacamento (ritmo em multiplos de 4) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; } /* ============================== TEMA PADRAO: Gold Black ============================== */ :root, [data-theme="gold_black"] { --color-primary: #F5A623; --color-primary-hover: #D4911F; --color-primary-light: rgba(245, 166, 35, 0.15); --color-primary-text: #000000; --color-bg-body: #0A0A0A; --color-bg-sidebar: #111111; --color-bg-card: #1A1A1A; --color-bg-card-hover: #222222; --color-bg-input: #1E1E1E; --color-bg-modal: #1A1A1A; --color-border: #2A2A2A; --color-border-light: #333333; --color-text-primary: #FFFFFF; --color-text-secondary: #999999; --color-text-muted: #666666; --color-success: #22C55E; --color-success-light: rgba(34, 197, 94, 0.15); --color-warning: #F59E0B; --color-warning-light: rgba(245, 158, 11, 0.15); --color-error: #EF4444; --color-error-light: rgba(239, 68, 68, 0.15); --color-info: #3B82F6; --color-info-light: rgba(59, 130, 246, 0.15); --sidebar-width: 195px; --header-height: 64px; --border-radius: 8px; --border-radius-lg: 12px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5); --transition: all 0.2s ease; } /* ============================== Blue Black ============================== */ [data-theme="blue_black"] { --color-primary: #3B82F6; --color-primary-hover: #2563EB; --color-primary-light: rgba(59, 130, 246, 0.15); --color-primary-text: #FFFFFF; } /* ============================== Cyan Black ============================== */ [data-theme="cyan_black"] { --color-primary: #06B6D4; --color-primary-hover: #0891B2; --color-primary-light: rgba(6, 182, 212, 0.15); } /* ============================== Green Black ============================== */ [data-theme="green_black"] { --color-primary: #22C55E; --color-primary-hover: #16A34A; --color-primary-light: rgba(34, 197, 94, 0.15); } /* ============================== Brown Black ============================== */ [data-theme="brown_black"] { --color-primary: #A16207; --color-primary-hover: #854D0E; --color-primary-light: rgba(161, 98, 7, 0.15); --color-primary-text: #FFFFFF; } /* ============================== Purple Black ============================== */ [data-theme="purple_black"] { --color-primary: #8B5CF6; --color-primary-hover: #7C3AED; --color-primary-light: rgba(139, 92, 246, 0.15); --color-primary-text: #FFFFFF; } /* ============================== Orange Black ============================== */ [data-theme="orange_black"] { --color-primary: #F97316; --color-primary-hover: #EA580C; --color-primary-light: rgba(249, 115, 22, 0.15); } /* ============================== Rose Black ============================== */ [data-theme="rose_black"] { --color-primary: #F43F5E; --color-primary-hover: #E11D48; --color-primary-light: rgba(244, 63, 94, 0.15); } /* ============================== Administration Light ============================== */ [data-theme="administration_light"] { --color-primary: #3B82F6; --color-primary-hover: #2563EB; --color-primary-light: rgba(59, 130, 246, 0.1); --color-primary-text: #FFFFFF; --color-bg-body: #F3F4F6; --color-bg-sidebar: #FFFFFF; --color-bg-card: #FFFFFF; --color-bg-card-hover: #F9FAFB; --color-bg-input: #F9FAFB; --color-bg-modal: #FFFFFF; --color-border: #E5E7EB; --color-border-light: #D1D5DB; --color-text-primary: #111827; --color-text-secondary: #4B5563; --color-text-muted: #6B7280; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1); } /* ============================== Minimal White ============================== */ [data-theme="minimal_white"] { --color-primary: #111827; --color-primary-hover: #1F2937; --color-primary-light: rgba(17, 24, 39, 0.08); --color-primary-text: #FFFFFF; --color-bg-body: #FFFFFF; --color-bg-sidebar: #FAFAFA; --color-bg-card: #FFFFFF; --color-bg-card-hover: #F9FAFB; --color-bg-input: #F3F4F6; --color-bg-modal: #FFFFFF; --color-border: #E5E7EB; --color-border-light: #D1D5DB; --color-text-primary: #111827; --color-text-secondary: #4B5563; --color-text-muted: #6B7280; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1); } /* ============================== Industrial Blue ============================== */ [data-theme="industrial_blue"] { --color-primary: #1E40AF; --color-primary-hover: #1D4ED8; --color-primary-light: rgba(30, 64, 175, 0.2); --color-primary-text: #FFFFFF; --color-bg-body: #0F172A; --color-bg-sidebar: #1E293B; --color-bg-card: #1E293B; --color-bg-card-hover: #334155; --color-bg-input: #1E293B; --color-bg-modal: #1E293B; --color-border: #334155; --color-border-light: #475569; --color-text-primary: #F1F5F9; --color-text-secondary: #94A3B8; --color-text-muted: #64748B; } /* ============================== Granite Black ============================== */ [data-theme="granite_black"] { --color-primary: #6B7280; --color-primary-hover: #4B5563; --color-primary-light: rgba(107, 114, 128, 0.2); --color-primary-text: #FFFFFF; --color-bg-body: #111827; --color-bg-sidebar: #1F2937; --color-bg-card: #1F2937; --color-bg-card-hover: #374151; --color-bg-input: #1F2937; --color-bg-modal: #1F2937; --color-border: #374151; --color-border-light: #4B5563; --color-text-primary: #F9FAFB; --color-text-secondary: #9CA3AF; --color-text-muted: #6B7280; } /* ============================== Dark Purple ============================== */ [data-theme="dark_purple"] { --color-primary: #7C3AED; --color-primary-hover: #6D28D9; --color-primary-light: rgba(124, 58, 237, 0.15); --color-primary-text: #FFFFFF; --color-bg-body: #0A0A0F; --color-bg-sidebar: #13111C; --color-bg-card: #1A1725; --color-bg-card-hover: #221E30; --color-bg-input: #1A1725; --color-bg-modal: #1A1725; --color-border: #2D2640; --color-border-light: #3D3555; }