/** * Draftr Theme System * A comprehensive theming system supporting light and dark modes * with customizable accent colors. * * Theme is controlled by: * 1. data-theme attribute on element ('light' or 'dark') * 2. data-accent attribute for accent color ('emerald', 'indigo', 'violet', etc.) * * Usage: * */ /* ==================== Base Theme Variables ==================== */ :root { /* Default to dark theme */ --theme-mode: dark; /* ==================== Accent Color Palettes ==================== */ /* Emerald (Default) */ --accent-emerald: #10b981; --accent-emerald-light: #34d399; --accent-emerald-dark: #059669; --accent-emerald-glow: rgba(16, 185, 129, 0.3); /* Indigo */ --accent-indigo: #6366f1; --accent-indigo-light: #818cf8; --accent-indigo-dark: #4f46e5; --accent-indigo-glow: rgba(99, 102, 241, 0.3); /* Violet */ --accent-violet: #8b5cf6; --accent-violet-light: #a78bfa; --accent-violet-dark: #7c3aed; --accent-violet-glow: rgba(139, 92, 246, 0.3); /* Cyan */ --accent-cyan: #06b6d4; --accent-cyan-light: #22d3ee; --accent-cyan-dark: #0891b2; --accent-cyan-glow: rgba(6, 182, 212, 0.3); /* Rose */ --accent-rose: #f43f5e; --accent-rose-light: #fb7185; --accent-rose-dark: #e11d48; --accent-rose-glow: rgba(244, 63, 94, 0.3); /* Amber */ --accent-amber: #f59e0b; --accent-amber-light: #fbbf24; --accent-amber-dark: #d97706; --accent-amber-glow: rgba(245, 158, 11, 0.3); /* Teal */ --accent-teal: #14b8a6; --accent-teal-light: #2dd4bf; --accent-teal-dark: #0d9488; --accent-teal-glow: rgba(20, 184, 166, 0.3); /* Blue */ --accent-blue: #3b82f6; --accent-blue-light: #60a5fa; --accent-blue-dark: #2563eb; --accent-blue-glow: rgba(59, 130, 246, 0.3); /* Orange (Draftr default) */ --accent-orange: #f97316; --accent-orange-light: #fb923c; --accent-orange-dark: #ea580c; --accent-orange-glow: rgba(249, 115, 22, 0.3); /* ==================== Status Colors (constant across themes) ==================== */ --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-danger: #ef4444; --color-danger-light: rgba(239, 68, 68, 0.15); --color-info: #3b82f6; --color-info-light: rgba(59, 130, 246, 0.15); /* ==================== Gradient Definitions ==================== */ --gradient-primary: linear-gradient(135deg, var(--theme-accent) 0%, var(--theme-accent-dark) 100%); --gradient-primary-glow: linear-gradient(135deg, var(--theme-accent-light) 0%, var(--theme-accent) 100%); --gradient-secondary: var(--gradient-primary); --gradient-success: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); --gradient-success-light: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); --gradient-success-transparent: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); --gradient-warning-light: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); --gradient-warning-transparent: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%); --gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); --gradient-danger-transparent: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%); --gradient-info: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); --gradient-info-light: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%); --gradient-violet: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); --gradient-violet-light: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%); --gradient-pink: linear-gradient(135deg, #ec4899 0%, #db2777 100%); --gradient-orange: linear-gradient(135deg, #f97316 0%, #ea580c 100%); --gradient-teal: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%); --gradient-tertiary: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); --gradient-primary-transparent: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(99, 102, 241, 0.05) 100%); /* Multi-color gradients */ --gradient-sunset: linear-gradient(135deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%); --gradient-ocean: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%); --gradient-forest: linear-gradient(135deg, #10b981 0%, #14b8a6 50%, #06b6d4 100%); --gradient-aurora: linear-gradient(135deg, #a855f7 0%, #6366f1 25%, #06b6d4 50%, #10b981 100%); } /* ==================== Dark Theme (Default) - Improved Contrast ==================== */ :root, [data-theme="dark"] { /* Background colors - better separation */ --theme-bg-primary: #0c0e14; --theme-bg-secondary: #13161e; --theme-bg-tertiary: #1a1e2a; --theme-bg-elevated: #242936; /* Menu/Navigation background - sophisticated charcoal with blue undertone */ --theme-menu-bg: #161d2b; /* Surface/Card colors - more visible distinction */ --theme-surface: rgba(30, 35, 48, 0.95); --theme-surface-solid: #1e2332; --theme-surface-hover: rgba(38, 44, 58, 0.98); --theme-surface-active: rgba(48, 54, 70, 1); /* Text colors - improved contrast for readability */ --theme-text-primary: #f8fafc; --theme-text-secondary: #e8ecf2; --theme-text-muted: #d0dae6; --theme-text-tertiary: #b0c0d0; --theme-text-disabled: #8899aa; /* Sidebar text colors - for dark menu backgrounds (same as text colors in dark themes) */ --sidebar-text-primary: #f8fafc; --sidebar-text-secondary: #e8ecf2; --sidebar-text-muted: #d0dae6; --sidebar-text-tertiary: #b0c0d0; /* Border colors - more visible */ --theme-border: rgba(255, 255, 255, 0.15); --theme-border-light: rgba(255, 255, 255, 0.2); --theme-border-hover: rgba(255, 255, 255, 0.25); --theme-border-secondary: rgba(255, 255, 255, 0.1); --theme-border-focus: rgba(var(--theme-accent-rgb), 0.5); /* Input colors */ --theme-input-bg: rgba(255, 255, 255, 0.08); --theme-input-border: rgba(255, 255, 255, 0.18); --theme-input-text: #f8fafc; --theme-input-placeholder: #9aa8b8; /* Shadows - enhanced for depth */ --theme-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15); --theme-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35), 0 4px 8px rgba(0, 0, 0, 0.2); --theme-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45), 0 8px 16px rgba(0, 0, 0, 0.25); --theme-shadow-glow: 0 0 40px var(--theme-accent-glow); /* Scrollbar */ --theme-scrollbar-track: #161922; --theme-scrollbar-thumb: rgba(255, 255, 255, 0.18); --theme-scrollbar-thumb-hover: rgba(255, 255, 255, 0.28); /* Overlay */ --theme-overlay: rgba(0, 0, 0, 0.6); --theme-overlay-light: rgba(0, 0, 0, 0.4); /* Panel Borders - subtle borders for better definition */ --theme-panel-border-width: 1px; --theme-panel-border-color: 255, 255, 255; --theme-panel-border-opacity: 0.08; --theme-container-border-width: 1px; --theme-container-border-color: 255, 255, 255; --theme-container-border-opacity: 0.06; } /* ==================== Ocean Theme ==================== */ [data-theme="ocean"] { /* Background colors - deep ocean blues */ --theme-bg-primary: #0a1628; --theme-bg-secondary: #0f1d32; --theme-bg-tertiary: #162640; --theme-bg-elevated: #1e3150; /* Menu/Navigation background - deep navy with teal undertone */ --theme-menu-bg: #0b1e36; /* Surface/Card colors */ --theme-surface: rgba(22, 45, 75, 0.9); --theme-surface-solid: #162d4b; --theme-surface-hover: rgba(30, 55, 85, 0.95); --theme-surface-active: rgba(40, 65, 95, 1); /* Text colors */ --theme-text-primary: #e0f2fe; --theme-text-secondary: #bae6fd; --theme-text-muted: #7dd3fc; --theme-text-tertiary: #38bdf8; --theme-text-disabled: #0ea5e9; /* Border colors */ --theme-border: rgba(56, 189, 248, 0.2); --theme-border-light: rgba(56, 189, 248, 0.25); --theme-border-hover: rgba(56, 189, 248, 0.35); --theme-border-secondary: rgba(56, 189, 248, 0.12); --theme-border-focus: rgba(var(--theme-accent-rgb), 0.5); /* Input colors */ --theme-input-bg: rgba(56, 189, 248, 0.1); --theme-input-border: rgba(56, 189, 248, 0.25); --theme-input-text: #e0f2fe; --theme-input-placeholder: #7dd3fc; /* Shadows */ --theme-shadow-sm: 0 2px 4px rgba(0, 20, 40, 0.3); --theme-shadow-md: 0 8px 24px rgba(0, 20, 40, 0.4); --theme-shadow-lg: 0 16px 48px rgba(0, 20, 40, 0.5); --theme-shadow-glow: 0 0 40px rgba(56, 189, 248, 0.25); /* Scrollbar */ --theme-scrollbar-track: #0f1d32; --theme-scrollbar-thumb: rgba(56, 189, 248, 0.3); --theme-scrollbar-thumb-hover: rgba(56, 189, 248, 0.45); /* Overlay */ --theme-overlay: rgba(10, 22, 40, 0.8); --theme-overlay-light: rgba(10, 22, 40, 0.5); /* Panel Borders - cyan glow for ocean feel */ --theme-panel-border-width: 1px; --theme-panel-border-color: 56, 189, 248; --theme-panel-border-opacity: 0.2; --theme-container-border-width: 1px; --theme-container-border-color: 56, 189, 248; --theme-container-border-opacity: 0.12; } /* ==================== Red Sand (Desert) Theme ==================== */ [data-theme="redsand"] { /* Background colors - warm desert tones */ --theme-bg-primary: #1a1210; --theme-bg-secondary: #261a16; --theme-bg-tertiary: #33241e; --theme-bg-elevated: #422e26; /* Menu/Navigation background - rich terracotta brown */ --theme-menu-bg: #2a1c17; /* Surface/Card colors */ --theme-surface: rgba(55, 40, 35, 0.95); --theme-surface-solid: #372823; --theme-surface-hover: rgba(65, 48, 42, 0.98); --theme-surface-active: rgba(75, 58, 50, 1); /* Text colors */ --theme-text-primary: #fef3c7; --theme-text-secondary: #fde68a; --theme-text-muted: #fcd34d; --theme-text-tertiary: #f59e0b; --theme-text-disabled: #d97706; /* Border colors */ --theme-border: rgba(251, 191, 36, 0.2); --theme-border-light: rgba(251, 191, 36, 0.28); --theme-border-hover: rgba(251, 191, 36, 0.38); --theme-border-secondary: rgba(251, 191, 36, 0.12); --theme-border-focus: rgba(var(--theme-accent-rgb), 0.5); /* Input colors */ --theme-input-bg: rgba(251, 191, 36, 0.1); --theme-input-border: rgba(251, 191, 36, 0.25); --theme-input-text: #fef3c7; --theme-input-placeholder: #fcd34d; /* Shadows */ --theme-shadow-sm: 0 2px 4px rgba(26, 18, 16, 0.4); --theme-shadow-md: 0 8px 24px rgba(26, 18, 16, 0.5); --theme-shadow-lg: 0 16px 48px rgba(26, 18, 16, 0.6); --theme-shadow-glow: 0 0 40px rgba(251, 191, 36, 0.2); /* Scrollbar */ --theme-scrollbar-track: #261a16; --theme-scrollbar-thumb: rgba(251, 191, 36, 0.35); --theme-scrollbar-thumb-hover: rgba(251, 191, 36, 0.5); /* Overlay */ --theme-overlay: rgba(26, 18, 16, 0.8); --theme-overlay-light: rgba(26, 18, 16, 0.5); /* Panel Borders - warm amber glow */ --theme-panel-border-width: 1px; --theme-panel-border-color: 251, 191, 36; --theme-panel-border-opacity: 0.18; --theme-container-border-width: 1px; --theme-container-border-color: 251, 191, 36; --theme-container-border-opacity: 0.1; } /* ==================== Jungle Theme ==================== */ [data-theme="jungle"] { /* Background colors - lush forest greens */ --theme-bg-primary: #0a140d; --theme-bg-secondary: #101f15; --theme-bg-tertiary: #172a1e; --theme-bg-elevated: #1f3828; /* Menu/Navigation background - deep forest canopy */ --theme-menu-bg: #112a1a; /* Surface/Card colors */ --theme-surface: rgba(25, 50, 35, 0.95); --theme-surface-solid: #193223; --theme-surface-hover: rgba(32, 60, 42, 0.98); --theme-surface-active: rgba(42, 72, 52, 1); /* Text colors */ --theme-text-primary: #ecfdf5; --theme-text-secondary: #d1fae5; --theme-text-muted: #a7f3d0; --theme-text-tertiary: #6ee7b7; --theme-text-disabled: #34d399; /* Border colors */ --theme-border: rgba(52, 211, 153, 0.2); --theme-border-light: rgba(52, 211, 153, 0.28); --theme-border-hover: rgba(52, 211, 153, 0.38); --theme-border-secondary: rgba(52, 211, 153, 0.12); --theme-border-focus: rgba(var(--theme-accent-rgb), 0.5); /* Input colors */ --theme-input-bg: rgba(52, 211, 153, 0.1); --theme-input-border: rgba(52, 211, 153, 0.25); --theme-input-text: #ecfdf5; --theme-input-placeholder: #a7f3d0; /* Shadows */ --theme-shadow-sm: 0 2px 4px rgba(10, 20, 13, 0.4); --theme-shadow-md: 0 8px 24px rgba(10, 20, 13, 0.5); --theme-shadow-lg: 0 16px 48px rgba(10, 20, 13, 0.6); --theme-shadow-glow: 0 0 40px rgba(52, 211, 153, 0.2); /* Scrollbar */ --theme-scrollbar-track: #101f15; --theme-scrollbar-thumb: rgba(52, 211, 153, 0.35); --theme-scrollbar-thumb-hover: rgba(52, 211, 153, 0.5); /* Overlay */ --theme-overlay: rgba(10, 20, 13, 0.8); --theme-overlay-light: rgba(10, 20, 13, 0.5); /* Panel Borders - emerald accent */ --theme-panel-border-width: 1px; --theme-panel-border-color: 52, 211, 153; --theme-panel-border-opacity: 0.18; --theme-container-border-width: 1px; --theme-container-border-color: 52, 211, 153; --theme-container-border-opacity: 0.1; } /* ==================== Midnight Purple Theme ==================== */ [data-theme="midnight"] { /* Background colors - deep purple night */ --theme-bg-primary: #12101a; --theme-bg-secondary: #1a1724; --theme-bg-tertiary: #241f32; --theme-bg-elevated: #302840; /* Menu/Navigation background - elegant royal purple */ --theme-menu-bg: #1a1430; /* Surface/Card colors */ --theme-surface: rgba(42, 35, 60, 0.95); --theme-surface-solid: #2a233c; --theme-surface-hover: rgba(52, 44, 72, 0.98); --theme-surface-active: rgba(62, 52, 85, 1); /* Text colors */ --theme-text-primary: #f3e8ff; --theme-text-secondary: #e9d5ff; --theme-text-muted: #d8b4fe; --theme-text-tertiary: #c084fc; --theme-text-disabled: #a855f7; /* Border colors */ --theme-border: rgba(192, 132, 252, 0.2); --theme-border-light: rgba(192, 132, 252, 0.28); --theme-border-hover: rgba(192, 132, 252, 0.38); --theme-border-secondary: rgba(192, 132, 252, 0.12); --theme-border-focus: rgba(var(--theme-accent-rgb), 0.5); /* Input colors */ --theme-input-bg: rgba(192, 132, 252, 0.1); --theme-input-border: rgba(192, 132, 252, 0.25); --theme-input-text: #f3e8ff; --theme-input-placeholder: #d8b4fe; /* Shadows */ --theme-shadow-sm: 0 2px 4px rgba(18, 16, 26, 0.4); --theme-shadow-md: 0 8px 24px rgba(18, 16, 26, 0.5); --theme-shadow-lg: 0 16px 48px rgba(18, 16, 26, 0.6); --theme-shadow-glow: 0 0 40px rgba(192, 132, 252, 0.2); /* Scrollbar */ --theme-scrollbar-track: #1a1724; --theme-scrollbar-thumb: rgba(192, 132, 252, 0.35); --theme-scrollbar-thumb-hover: rgba(192, 132, 252, 0.5); /* Overlay */ --theme-overlay: rgba(18, 16, 26, 0.8); --theme-overlay-light: rgba(18, 16, 26, 0.5); /* Panel Borders - purple glow */ --theme-panel-border-width: 1px; --theme-panel-border-color: 192, 132, 252; --theme-panel-border-opacity: 0.2; --theme-container-border-width: 1px; --theme-container-border-color: 192, 132, 252; --theme-container-border-opacity: 0.12; } /* ==================== Slate Theme (Softer Dark) ==================== */ [data-theme="slate"] { /* Background colors - softer, muted dark */ --theme-bg-primary: #141820; --theme-bg-secondary: #1c212b; --theme-bg-tertiary: #262d3a; --theme-bg-elevated: #313a4a; /* Menu/Navigation background - professional cool gray */ --theme-menu-bg: #1e2636; /* Surface/Card colors */ --theme-surface: rgba(45, 55, 72, 0.95); --theme-surface-solid: #2d3748; --theme-surface-hover: rgba(55, 65, 82, 0.98); --theme-surface-active: rgba(65, 75, 95, 1); /* Text colors - improved contrast */ --theme-text-primary: #f1f5f9; --theme-text-secondary: #e2e8f0; --theme-text-muted: #d4dce8; --theme-text-tertiary: #adbdcd; --theme-text-disabled: #7a8a9a; /* Border colors */ --theme-border: rgba(148, 163, 184, 0.2); --theme-border-light: rgba(148, 163, 184, 0.28); --theme-border-hover: rgba(148, 163, 184, 0.38); --theme-border-secondary: rgba(148, 163, 184, 0.12); --theme-border-focus: rgba(var(--theme-accent-rgb), 0.5); /* Input colors */ --theme-input-bg: rgba(148, 163, 184, 0.1); --theme-input-border: rgba(148, 163, 184, 0.25); --theme-input-text: #f1f5f9; --theme-input-placeholder: #adbdcd; /* Shadows */ --theme-shadow-sm: 0 2px 4px rgba(20, 24, 32, 0.35); --theme-shadow-md: 0 8px 24px rgba(20, 24, 32, 0.45); --theme-shadow-lg: 0 16px 48px rgba(20, 24, 32, 0.55); --theme-shadow-glow: 0 0 40px var(--theme-accent-glow); /* Scrollbar */ --theme-scrollbar-track: #1c212b; --theme-scrollbar-thumb: rgba(148, 163, 184, 0.3); --theme-scrollbar-thumb-hover: rgba(148, 163, 184, 0.45); /* Overlay */ --theme-overlay: rgba(20, 24, 32, 0.75); --theme-overlay-light: rgba(20, 24, 32, 0.5); /* Panel Borders - subtle gray for softer look */ --theme-panel-border-width: 1px; --theme-panel-border-color: 148, 163, 184; --theme-panel-border-opacity: 0.15; --theme-container-border-width: 1px; --theme-container-border-color: 148, 163, 184; --theme-container-border-opacity: 0.1; } /* ==================== Default Theme (Draftr - Clean Modern) ==================== */ [data-theme="default"] { /* Background colors - warm whites inspired by Draft.org */ --theme-bg-primary: #fafafa; --theme-bg-secondary: #ffffff; --theme-bg-tertiary: #f5f5f4; --theme-bg-elevated: #ffffff; /* Menu/Navigation background - clean slate matching Draft.org header */ --theme-menu-bg: #292524; /* Surface/Card colors */ --theme-surface: #ffffff; --theme-surface-solid: #ffffff; --theme-surface-hover: #fafaf9; --theme-surface-active: #f5f5f4; /* Text colors - warm charcoal tones (for main content area) */ --theme-text-primary: #1c1917; --theme-text-secondary: #44403c; --theme-text-muted: #78716c; --theme-text-tertiary: #a8a29e; --theme-text-disabled: #d6d3d1; /* Sidebar text colors - light colors for dark menu background */ --sidebar-text-primary: #f5f5f4; --sidebar-text-secondary: #e7e5e4; --sidebar-text-muted: #d6d3d1; --sidebar-text-tertiary: #a8a29e; /* Border colors - warm and subtle */ --theme-border: #e7e5e4; --theme-border-light: #d6d3d1; --theme-border-hover: #a8a29e; --theme-border-secondary: #f5f5f4; --theme-border-focus: rgba(var(--theme-accent-rgb), 0.5); /* Input colors */ --theme-input-bg: #ffffff; --theme-input-border: #e7e5e4; --theme-input-text: #1c1917; --theme-input-placeholder: #a8a29e; /* Shadows - soft and natural */ --theme-shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.04); --theme-shadow-md: 0 4px 12px rgba(28, 25, 23, 0.06); --theme-shadow-lg: 0 12px 32px rgba(28, 25, 23, 0.1); --theme-shadow-glow: 0 0 24px var(--theme-accent-glow); /* Scrollbar */ --theme-scrollbar-track: #f5f5f4; --theme-scrollbar-thumb: #d6d3d1; --theme-scrollbar-thumb-hover: #a8a29e; /* Overlay */ --theme-overlay: rgba(28, 25, 23, 0.5); --theme-overlay-light: rgba(28, 25, 23, 0.3); /* Panel Borders - clean minimal borders */ --theme-panel-border-width: 1px; --theme-panel-border-color: 0, 0, 0; --theme-panel-border-opacity: 0.06; --theme-container-border-width: 1px; --theme-container-border-color: 0, 0, 0; --theme-container-border-opacity: 0.04; } /* ==================== Light Theme ==================== */ [data-theme="light"] { /* Background colors */ --theme-bg-primary: #f8fafc; --theme-bg-secondary: #ffffff; --theme-bg-tertiary: #f1f5f9; --theme-bg-elevated: #ffffff; /* Menu/Navigation background - elegant dark slate for contrast */ --theme-menu-bg: #1e293b; /* Surface/Card colors */ --theme-surface: #ffffff; --theme-surface-solid: #ffffff; --theme-surface-hover: #f8fafc; --theme-surface-active: #f1f5f9; /* Text colors (for main content - light backgrounds) */ --theme-text-primary: #0f172a; --theme-text-secondary: #475569; --theme-text-muted: #64748b; --theme-text-disabled: #94a3b8; /* Sidebar text colors - light colors for dark menu background */ --sidebar-text-primary: #f1f5f9; --sidebar-text-secondary: #e2e8f0; --sidebar-text-muted: #cbd5e1; --sidebar-text-tertiary: #94a3b8; /* Border colors */ --theme-border: #e2e8f0; --theme-border-light: #cbd5e1; --theme-border-focus: var(--theme-accent); /* Input colors */ --theme-input-bg: #ffffff; --theme-input-border: #e2e8f0; --theme-input-text: #0f172a; --theme-input-placeholder: #94a3b8; /* Shadows */ --theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --theme-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --theme-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12); --theme-shadow-glow: 0 0 24px var(--theme-accent-glow); /* Scrollbar */ --theme-scrollbar-track: #f1f5f9; --theme-scrollbar-thumb: #cbd5e1; --theme-scrollbar-thumb-hover: #94a3b8; /* Overlay */ --theme-overlay: rgba(0, 0, 0, 0.5); --theme-overlay-light: rgba(0, 0, 0, 0.3); /* Panel Borders - light subtle borders */ --theme-panel-border-width: 1px; --theme-panel-border-color: 0, 0, 0; --theme-panel-border-opacity: 0.08; --theme-container-border-width: 1px; --theme-container-border-color: 0, 0, 0; --theme-container-border-opacity: 0.05; } /* ==================== Accent Color Assignments ==================== */ /* Default: Emerald */ :root, [data-accent="emerald"] { --theme-accent: var(--accent-emerald); --theme-accent-light: var(--accent-emerald-light); --theme-accent-dark: var(--accent-emerald-dark); --theme-accent-glow: var(--accent-emerald-glow); --theme-accent-rgb: 16, 185, 129; } [data-accent="indigo"] { --theme-accent: var(--accent-indigo); --theme-accent-light: var(--accent-indigo-light); --theme-accent-dark: var(--accent-indigo-dark); --theme-accent-glow: var(--accent-indigo-glow); --theme-accent-rgb: 99, 102, 241; } [data-accent="violet"] { --theme-accent: var(--accent-violet); --theme-accent-light: var(--accent-violet-light); --theme-accent-dark: var(--accent-violet-dark); --theme-accent-glow: var(--accent-violet-glow); --theme-accent-rgb: 139, 92, 246; } [data-accent="cyan"] { --theme-accent: var(--accent-cyan); --theme-accent-light: var(--accent-cyan-light); --theme-accent-dark: var(--accent-cyan-dark); --theme-accent-glow: var(--accent-cyan-glow); --theme-accent-rgb: 6, 182, 212; } [data-accent="rose"] { --theme-accent: var(--accent-rose); --theme-accent-light: var(--accent-rose-light); --theme-accent-dark: var(--accent-rose-dark); --theme-accent-glow: var(--accent-rose-glow); --theme-accent-rgb: 244, 63, 94; } [data-accent="amber"] { --theme-accent: var(--accent-amber); --theme-accent-light: var(--accent-amber-light); --theme-accent-dark: var(--accent-amber-dark); --theme-accent-glow: var(--accent-amber-glow); --theme-accent-rgb: 245, 158, 11; } [data-accent="teal"] { --theme-accent: var(--accent-teal); --theme-accent-light: var(--accent-teal-light); --theme-accent-dark: var(--accent-teal-dark); --theme-accent-glow: var(--accent-teal-glow); --theme-accent-rgb: 20, 184, 166; } [data-accent="blue"] { --theme-accent: var(--accent-blue); --theme-accent-light: var(--accent-blue-light); --theme-accent-dark: var(--accent-blue-dark); --theme-accent-glow: var(--accent-blue-glow); --theme-accent-rgb: 59, 130, 246; } [data-accent="orange"] { --theme-accent: var(--accent-orange); --theme-accent-light: var(--accent-orange-light); --theme-accent-dark: var(--accent-orange-dark); --theme-accent-glow: var(--accent-orange-glow); --theme-accent-rgb: 249, 115, 22; } /* ==================== Heading Gradients ==================== */ :root { --heading-gradient-primary: linear-gradient(135deg, var(--theme-accent) 0%, var(--theme-accent-light) 100%); --heading-gradient-accent: linear-gradient(135deg, #6366f1 0%, #a855f7 100%); --heading-gradient-cool: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); --heading-gradient-warm: linear-gradient(135deg, #f59e0b 0%, #f97316 100%); } /* ==================== Legacy Variable Aliases ==================== */ /* For backwards compatibility with existing code */ :root { /* Dark theme aliases */ --dark-bg: var(--theme-bg-primary); --dark-bg-secondary: var(--theme-bg-secondary); --dark-bg-tertiary: var(--theme-bg-tertiary); --dark-card-bg: var(--theme-surface); --dark-card-bg-solid: var(--theme-surface-solid); --dark-card-bg-hover: var(--theme-surface-hover); --dark-text-primary: var(--theme-text-primary); --dark-text-secondary: var(--theme-text-secondary); --dark-text-muted: var(--theme-text-muted); --dark-border: var(--theme-border); --dark-border-light: var(--theme-border-light); --dark-input-bg: var(--theme-input-bg); --dark-input-border: var(--theme-input-border); --dark-shadow-sm: var(--theme-shadow-sm); --dark-shadow-md: var(--theme-shadow-md); --dark-shadow-lg: var(--theme-shadow-lg); /* Agent Chat Modal compatibility */ --bg-primary: var(--theme-surface-solid); --bg-secondary: var(--theme-bg-secondary); --bg-hover: var(--theme-surface-hover); --text-primary: var(--theme-text-primary); --text-secondary: var(--theme-text-secondary); --text-muted: var(--theme-text-muted); --border-color: var(--theme-border); --primary-color: var(--theme-accent); --primary-hover: var(--theme-accent-dark); /* Brand colors */ --brand-primary: var(--theme-accent); --brand-primary-light: var(--theme-accent-light); --brand-primary-dark: var(--theme-accent-dark); --brand-secondary: #6366f1; --brand-secondary-light: #818cf8; /* Button shadows */ --btn-shadow-emerald: 0 4px 15px rgba(16, 185, 129, 0.3); --btn-shadow-emerald-hover: 0 8px 25px rgba(16, 185, 129, 0.4); --btn-shadow-indigo: 0 4px 15px rgba(99, 102, 241, 0.3); --btn-shadow-indigo-hover: 0 8px 25px rgba(99, 102, 241, 0.4); --btn-shadow-violet: 0 4px 15px rgba(139, 92, 246, 0.3); --btn-shadow-violet-hover: 0 8px 25px rgba(139, 92, 246, 0.4); /* Heading colors */ --heading-color-primary: var(--theme-text-primary); --heading-color-accent: var(--theme-accent-light); --heading-color-brand: var(--theme-accent-light); --heading-color-muted: var(--theme-text-muted); /* Gradient shortcuts */ --gradient-emerald: var(--gradient-success); --gradient-emerald-glow: linear-gradient(135deg, #34d399 0%, #10b981 100%); --gradient-indigo: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); --gradient-indigo-purple: var(--gradient-primary); --gradient-violet: var(--gradient-violet); --gradient-cyan: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); --gradient-teal: var(--gradient-teal); --gradient-amber: var(--gradient-warning); --gradient-rose: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%); } /* ==================== Global Element Styles ==================== */ /* Body and main content */ body { background-color: var(--theme-bg-primary); color: var(--theme-text-primary); } /* Scrollbar styling */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--theme-scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--theme-scrollbar-thumb); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--theme-scrollbar-thumb-hover); } /* ==================== Utility Classes ==================== */ /* Text colors */ .text-primary { color: var(--theme-text-primary) !important; } .text-secondary { color: var(--theme-text-secondary) !important; } .text-muted { color: var(--theme-text-muted) !important; } .text-accent { color: var(--theme-accent) !important; } .text-accent-light { color: var(--theme-accent-light) !important; } /* Background colors */ .bg-primary { background-color: var(--theme-bg-primary) !important; } .bg-secondary { background-color: var(--theme-bg-secondary) !important; } .bg-surface { background-color: var(--theme-surface) !important; } .bg-accent { background-color: var(--theme-accent) !important; } /* Gradient text */ .gradient-text { background: var(--heading-gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .gradient-text-accent { background: var(--heading-gradient-accent); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Gradient backgrounds */ .bg-gradient-primary { background: var(--gradient-primary) !important; } .bg-gradient-secondary { background: var(--gradient-secondary) !important; } .bg-gradient-success { background: var(--gradient-success) !important; } .bg-gradient-warning { background: var(--gradient-warning) !important; } .bg-gradient-danger { background: var(--gradient-danger) !important; } /* Card styles */ .theme-card { background: var(--theme-surface); border: var(--custom-panel-border-width, var(--theme-panel-border-width, 1px)) solid rgba(var(--custom-panel-border-color, var(--theme-panel-border-color, 255, 255, 255)), var(--custom-panel-border-opacity, var(--theme-panel-border-opacity, 0.1))); border-radius: 16px; box-shadow: var(--theme-shadow-md); } .theme-card-elevated { background: var(--theme-surface-solid); border: var(--custom-panel-border-width, var(--theme-panel-border-width, 1px)) solid rgba(var(--custom-panel-border-color, var(--theme-panel-border-color, 255, 255, 255)), var(--custom-panel-border-opacity, var(--theme-panel-border-opacity, 0.12))); border-radius: 16px; box-shadow: var(--theme-shadow-lg); } /* Generic card and panel border styles - applies custom border settings site-wide */ .card, .panel, .theme-section { border: var(--custom-panel-border-width, var(--theme-panel-border-width, 1px)) solid rgba(var(--custom-panel-border-color, var(--theme-panel-border-color, 255, 255, 255)), var(--custom-panel-border-opacity, var(--theme-panel-border-opacity, 0.1))) !important; } /* Inner Panel styles - for cards inside containers */ .inner-panel, .stat-card, .dashboard-card, .settings-card { border: var(--custom-panel-border-width, var(--theme-panel-border-width, 1px)) solid rgba(var(--custom-panel-border-color, var(--theme-panel-border-color, 255, 255, 255)), var(--custom-panel-border-opacity, var(--theme-panel-border-opacity, 0.1))); } /* Container Panel styles - for larger sections */ .container-panel, .dashboard-section, .content-section, .card-container { border: var(--custom-container-border-width, var(--theme-container-border-width, 1px)) solid rgba(var(--custom-container-border-color, var(--theme-container-border-color, 255, 255, 255)), var(--custom-container-border-opacity, var(--theme-container-border-opacity, 0.08))); } /* Button styles */ .btn-theme-primary { background: var(--gradient-primary); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 10px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 15px var(--theme-accent-glow); } .btn-theme-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px var(--theme-accent-glow); } .btn-theme-secondary { background: var(--theme-surface); color: var(--theme-text-primary); border: 1px solid var(--theme-border); padding: 0.75rem 1.5rem; border-radius: 10px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .btn-theme-secondary:hover { background: var(--theme-surface-hover); border-color: var(--theme-border-light); } /* Input styles */ .input-theme { background: var(--theme-input-bg); border: 1px solid var(--theme-input-border); color: var(--theme-input-text); padding: 0.75rem 1rem; border-radius: 8px; transition: all 0.2s ease; } .input-theme:focus { outline: none; border-color: var(--theme-accent); box-shadow: 0 0 0 3px var(--theme-accent-glow); } .input-theme::placeholder { color: var(--theme-input-placeholder); } /* Page title styles */ .page-title { font-size: 1.75rem; font-weight: 700; background: var(--heading-gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.5rem; } .page-subtitle { color: var(--theme-text-muted); font-size: 0.9rem; } /* Section styles */ .theme-section { background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: 16px; padding: 1.5rem; position: relative; overflow: hidden; } .theme-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-primary); } .theme-section-title { font-size: 1.1rem; font-weight: 600; color: var(--theme-text-primary); margin: 0; } /* Badge styles */ .badge-theme { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; } .badge-success { background: var(--color-success-light); color: var(--color-success); } .badge-warning { background: var(--color-warning-light); color: var(--color-warning); } .badge-danger { background: var(--color-danger-light); color: var(--color-danger); } .badge-info { background: var(--color-info-light); color: var(--color-info); } .badge-accent { background: var(--theme-accent-glow); color: var(--theme-accent); } /* ==================== Custom Color Overrides ==================== */ /* These are applied when users select custom colors in theme settings */ /* Menu/Sidebar/Header background - override when custom color is set */ [data-custom-menu-bg="true"] .layout-sidebar, [data-custom-menu-bg="true"] .layout-sidebar .sidebar, [data-custom-menu-bg="true"] .sidebar, [data-custom-menu-bg="true"] .agent-context-bar { background: var(--custom-menu-bg) !important; } /* Page border/outer background - override when custom color is set */ [data-custom-page-border-bg="true"] body { background-color: var(--custom-page-border-bg) !important; } [data-custom-page-border-bg="true"] .page-container { background-color: var(--custom-page-border-bg) !important; } /* Main content area background - override when custom color is set */ /* Uses higher specificity instead of !important to allow page-specific overrides */ html[data-custom-main-area-bg="true"] .layout-main { background-color: var(--custom-main-area-bg); } html[data-custom-main-area-bg="true"] .main-content-wrapper { background-color: var(--custom-main-area-bg); } html[data-custom-main-area-bg="true"] .main-content { background-color: var(--custom-main-area-bg); } /* Custom panel/card background color overrides */ [data-custom-panel-bg="true"] .theme-card, [data-custom-panel-bg="true"] .theme-card-elevated, [data-custom-panel-bg="true"] .theme-section, [data-custom-panel-bg="true"] .card, [data-custom-panel-bg="true"] .panel, [data-custom-panel-bg="true"] .stat-card, [data-custom-panel-bg="true"] .dashboard-card, [data-custom-panel-bg="true"] .content-panel, [data-custom-panel-bg="true"] .settings-card { background-color: var(--custom-panel-bg) !important; } /* Also apply to surfaces that use --theme-surface */ [data-custom-panel-bg="true"] { --theme-surface: var(--custom-panel-bg); --theme-surface-solid: var(--custom-panel-bg); } /* Custom input background color overrides */ [data-custom-input-bg="true"] { --theme-input-bg: var(--custom-input-bg); } [data-custom-input-bg="true"] input, [data-custom-input-bg="true"] select, [data-custom-input-bg="true"] textarea, [data-custom-input-bg="true"] .form-control, [data-custom-input-bg="true"] .input-theme { background-color: var(--custom-input-bg) !important; } /* Custom input text color overrides */ [data-custom-input-text="true"] { --theme-input-text: var(--custom-input-text); --theme-input-placeholder: var(--custom-input-text); } [data-custom-input-text="true"] input, [data-custom-input-text="true"] select, [data-custom-input-text="true"] textarea, [data-custom-input-text="true"] .form-control, [data-custom-input-text="true"] .input-theme { color: var(--custom-input-text) !important; } [data-custom-input-text="true"] input::placeholder, [data-custom-input-text="true"] textarea::placeholder { color: var(--custom-input-text) !important; opacity: 0.6; }