/* ========================================================================= CurupiraHUB - themes.css Cada tema redefine os tokens do design system (base.css). Aplicacao: . Sem preferencia = "dark" (design padrao navy + verde esmeralda). Temas claros tambem recebem data-theme-family="light" no . ========================================================================= */ /* ---------- DARK (default — navy + verde esmeralda) ------------------- */ html[data-theme="dark"] { --bg-base:#0b1120; --bg-surface:#0f172a; --bg-elevated:#1e293b; --bg-sidebar:#080e1a; --accent:#10b981; --accent-hover:#059669; --accent-subtle:rgba(16,185,129,0.12); --accent-border:rgba(16,185,129,0.35); --text-primary:#f1f5f9; --text-secondary:#94a3b8; --text-muted:#64748b; --border:#1e293b; --border-strong:#334155; --ok:#10b981; --warn:#f59e0b; --err:#ef4444; --info:#3b82f6; } /* ---------- LIGHT (claro corporativo) -------------------------------- */ html[data-theme="light"] { --bg-base:#f8fafc; --bg-surface:#ffffff; --bg-elevated:#eef2f7; --bg-sidebar:#0f172a; --accent:#059669; --accent-hover:#047857; --accent-subtle:rgba(5,150,105,0.12); --accent-border:rgba(5,150,105,0.35); --text-primary:#0f172a; --text-secondary:#475569; --text-muted:#94a3b8; --border:#e2e8f0; --border-strong:#cbd5e1; --ok:#059669; --warn:#d97706; --err:#dc2626; --info:#2563eb; } /* ---------- SEPIA (papel) -------------------------------------------- */ html[data-theme="sepia"] { --bg-base:#f4ecd8; --bg-surface:#fbf5e6; --bg-elevated:#e9dcc0; --bg-sidebar:#3a2f1c; --accent:#0f766e; --accent-hover:#0d5c55; --accent-subtle:rgba(15,118,110,0.12); --accent-border:rgba(15,118,110,0.35); --text-primary:#2a1f12; --text-secondary:#5a4a32; --text-muted:#93805f; --border:#ddccaa; --border-strong:#c2ad84; --ok:#4d7c0f; --warn:#b45309; --err:#b91c1c; --info:#0e7490; } /* ---------- HIGH CONTRAST (WCAG) ------------------------------------- */ html[data-theme="hicontrast"] { --bg-base:#000000; --bg-surface:#0a0a0a; --bg-elevated:#1a1a1a; --bg-sidebar:#000000; --accent:#00ff88; --accent-hover:#00e070; --accent-subtle:rgba(0,255,136,0.16); --accent-border:rgba(0,255,136,0.5); --text-primary:#ffffff; --text-secondary:#e0e0e0; --text-muted:#a0a0a0; --border:#2a2a2a; --border-strong:#ffffff; --ok:#00ff66; --warn:#ffd000; --err:#ff4040; --info:#00d4ff; } /* ---------- BLUE CORP ------------------------------------------------ */ html[data-theme="blue"] { --bg-base:#0a1929; --bg-surface:#0f2236; --bg-elevated:#1d3a55; --bg-sidebar:#061322; --accent:#38bdf8; --accent-hover:#0ea5e9; --accent-subtle:rgba(56,189,248,0.12); --accent-border:rgba(56,189,248,0.35); --text-primary:#eaf3fb; --text-secondary:#c2d5e5; --text-muted:#7d97ad; --border:#16304a; --border-strong:#2e4a66; --ok:#34d399; --warn:#fbbf24; --err:#f87171; --info:#38bdf8; } /* ---------- SOLARIZED DARK ------------------------------------------- */ html[data-theme="solarized"] { --bg-base:#002b36; --bg-surface:#073642; --bg-elevated:#0e5666; --bg-sidebar:#001f27; --accent:#2aa198; --accent-hover:#21867f; --accent-subtle:rgba(42,161,152,0.14); --accent-border:rgba(42,161,152,0.4); --text-primary:#fdf6e3; --text-secondary:#eee8d5; --text-muted:#7d9499; --border:#073642; --border-strong:#2a5765; --ok:#859900; --warn:#cb4b16; --err:#dc322f; --info:#268bd2; } /* ---------- NORD ----------------------------------------------------- */ html[data-theme="nord"] { --bg-base:#2e3440; --bg-surface:#3b4252; --bg-elevated:#4c566a; --bg-sidebar:#242933; --accent:#88c0d0; --accent-hover:#7ab0c0; --accent-subtle:rgba(136,192,208,0.14); --accent-border:rgba(136,192,208,0.4); --text-primary:#eceff4; --text-secondary:#d8dee9; --text-muted:#8d99ad; --border:#3b4252; --border-strong:#4c566a; --ok:#a3be8c; --warn:#ebcb8b; --err:#bf616a; --info:#88c0d0; } /* ---------- DRACULA -------------------------------------------------- */ html[data-theme="dracula"] { --bg-base:#282a36; --bg-surface:#21222c; --bg-elevated:#44475a; --bg-sidebar:#191a21; --accent:#bd93f9; --accent-hover:#a87fe0; --accent-subtle:rgba(189,147,249,0.16); --accent-border:rgba(189,147,249,0.4); --text-primary:#f8f8f2; --text-secondary:#d8d8cf; --text-muted:#8b8ca6; --border:#343746; --border-strong:#44475a; --ok:#50fa7b; --warn:#f1fa8c; --err:#ff5555; --info:#8be9fd; } /* ---------- BARBIE --------------------------------------------------- */ html[data-theme="barbie"] { --bg-base:#fff0f7; --bg-surface:#ffffff; --bg-elevated:#ffe0ef; --bg-sidebar:#7a1f5a; --accent:#d6006e; --accent-hover:#b00059; --accent-subtle:rgba(214,0,110,0.1); --accent-border:rgba(214,0,110,0.35); --text-primary:#3d0028; --text-secondary:#7a1f5a; --text-muted:#b07090; --border:#ffd0e6; --border-strong:#ffaad4; --ok:#00897b; --warn:#ef6c00; --err:#d50000; --info:#7c3aed; } /* ---------- PINK ----------------------------------------------------- */ html[data-theme="pink"] { --bg-base:#fff5fa; --bg-surface:#ffffff; --bg-elevated:#ffe4f1; --bg-sidebar:#6d1a44; --accent:#c2185b; --accent-hover:#a01049; --accent-subtle:rgba(194,24,91,0.1); --accent-border:rgba(194,24,91,0.35); --text-primary:#3d0a26; --text-secondary:#7a2754; --text-muted:#b06888; --border:#ffd6e8; --border-strong:#ffb0d0; --ok:#00897b; --warn:#ef6c00; --err:#c62828; --info:#7c3aed; } /* ---------- ROSE GOLD ------------------------------------------------ */ html[data-theme="rosegold"] { --bg-base:#faeae0; --bg-surface:#fff6ef; --bg-elevated:#f0d6c4; --bg-sidebar:#5a2c1a; --accent:#a8553a; --accent-hover:#8b3a1f; --accent-subtle:rgba(168,85,58,0.12); --accent-border:rgba(168,85,58,0.35); --text-primary:#2b0f05; --text-secondary:#6b3a25; --text-muted:#a8745a; --border:#e8c8b4; --border-strong:#cfa688; --ok:#5a7a2a; --warn:#b86028; --err:#8b2418; --info:#4a5d7a; } /* ---------- HELLO KITTY ---------------------------------------------- */ html[data-theme="kitty"] { --bg-base:#fff5fa; --bg-surface:#ffffff; --bg-elevated:#ffe8f0; --bg-sidebar:#1a1a1a; --accent:#e91e3a; --accent-hover:#c2102a; --accent-subtle:rgba(233,30,58,0.1); --accent-border:rgba(233,30,58,0.35); --text-primary:#1a1a1a; --text-secondary:#555555; --text-muted:#999999; --border:#ffd6e3; --border-strong:#ffadc5; --ok:#2e7d32; --warn:#ff8f00; --err:#c62828; --info:#1565c0; } /* ========================================================================= Ajustes leves por familia clara ========================================================================= */ html[data-theme-family="light"] body { background-image: none; } /* Sombras mais suaves e frias nos temas claros (cor escura forte pesa demais) */ html[data-theme-family="light"] { --shadow-color: 220 40% 50%; --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.12); --shadow-md: 0 2px 4px -2px hsl(var(--shadow-color) / 0.10), 0 6px 16px -6px hsl(var(--shadow-color) / 0.18); --shadow-lg: 0 4px 10px -4px hsl(var(--shadow-color) / 0.14), 0 16px 40px -10px hsl(var(--shadow-color) / 0.22); } /* Avatar com foto: borda some no claro — mantem contraste */ html[data-theme-family="light"] .sb-avatar { border-color: var(--accent-border); } /* Card de aviso hover no claro */ html[data-theme-family="light"] .aviso:hover { background: var(--bg-elevated); } /* Scrollbar tematica */ html { scrollbar-color: var(--border-strong) transparent; } /* ========================================================================= Swatches do menu de tema (preview de cor) ========================================================================= */ .swatch--dark { background: linear-gradient(135deg, #0b1120 50%, #10b981 50%); } .swatch--light { background: linear-gradient(135deg, #f8fafc 50%, #059669 50%); } .swatch--sepia { background: linear-gradient(135deg, #f4ecd8 50%, #0f766e 50%); } .swatch--hicontrast{ background: linear-gradient(135deg, #000000 50%, #00ff88 50%); } .swatch--blue { background: linear-gradient(135deg, #0a1929 50%, #38bdf8 50%); } .swatch--solarized { background: linear-gradient(135deg, #002b36 50%, #2aa198 50%); } .swatch--nord { background: linear-gradient(135deg, #2e3440 50%, #88c0d0 50%); } .swatch--dracula { background: linear-gradient(135deg, #282a36 50%, #bd93f9 50%); } .swatch--barbie { background: linear-gradient(135deg, #fff0f7 50%, #d6006e 50%); } .swatch--pink { background: linear-gradient(135deg, #fff5fa 50%, #c2185b 50%); } .swatch--rosegold { background: linear-gradient(135deg, #faeae0 50%, #a8553a 50%); } .swatch--kitty { background: linear-gradient(135deg, #ffffff 50%, #e91e3a 50%); }