/* ======================== Eventrey Theme CSS Custom Properties (Variables) ======================== */ :root { /* ── Backgrounds ── */ --bg-body: #ffffff; --bg-card: rgba(255,255,255,0.9); --bg-card-solid: #FFFFFF; --bg-sidebar: #1e1b19; --bg-sidebar-hover: rgba(255,255,255,0.08); --bg-sidebar-active: rgba(255,255,255,0.15); --bg-header: rgba(255,255,255,0.95); /* ── Palette ── */ --cod-gray: #1e1b19; --malta: #c8b0a5; --tobacco-brown: #6d4f3e; --slate-gray-new: #728394; --bali-hai: #829bab; /* ── Map old names to new palette ── */ --cream: #ffffff; --cream-card: #ffffff; --cream-border: #c8b0a5; --cream-hover: #f9f7f5; --sage: #6d4f3e; --sage-dark: #5a3f30; --sage-light: #c8b0a5; --sage-bg: #f9f7f5; --teal: #829bab; --teal-bg: #f9f7f5; --peach: #c8b0a5; --peach-light: #d9c8bf; --peach-bg: #f9f7f5; /* ── Brand Gradient (now solid Tobacco Brown) ── */ --gradient-brand: #6d4f3e; --gradient-brand-hover: #5a3f30; /* ── Sidebar Text ── */ --sidebar-text: rgba(255,255,255,0.7); --sidebar-text-active: #FFFFFF; --sidebar-icon: rgba(255,255,255,0.5); --sidebar-icon-active: #FFFFFF; /* ── Warm Text Colors ── */ --warm-text: #1e1b19; --warm-text-alt: #3a3330; --warm-text-light: #728394; --warm-text-muted: #c8b0a5; /* ── Text Semantic ── */ --text-primary: #1e1b19; --text-secondary: #728394; --text-muted: #c8b0a5; /* ── Accents ── */ --slate-grey: #728394; --soft-slate: #829bab; /* ── Semantic Variables ── */ --bg-primary: var(--cream); --bg-secondary: var(--cream-card); --bg-tertiary: var(--cream-hover); --border-default: var(--cream-border); --border-hover: var(--sage); --accent-primary: var(--sage); --accent-secondary: var(--peach); --accent-tertiary: var(--teal); /* ── Component-Specific Variables ── */ --header-bg: var(--bg-header); --card-bg: var(--cream-card); --card-border: var(--cream-border); --card-shadow: 0 1px 3px rgba(30, 19, 64, 0.04), 0 4px 12px rgba(30, 19, 64, 0.02); --button-primary-bg: var(--sage); --button-primary-text: #FFFFFF; --button-secondary-bg: var(--cream-hover); --button-secondary-text: var(--warm-text); --input-bg: var(--cream-card); --input-border: var(--cream-border); --input-text: var(--warm-text); --input-placeholder: var(--warm-text-muted); /* ── Form Elements ── */ --success-bg: #E8F5E9; --success-text: #2E7D32; --error-bg: #FFEBEE; --error-text: #C62828; --warning-bg: #FFF8E1; --warning-text: #F57F17; --info-bg: #E3F2FD; --info-text: #1565C0; } /* ======================== Dark Mode Overrides Redefines the same CSS variables when `.dark` is present on , so every surface using var(--cream), var(--warm-text), etc. flips. ======================== */ html.dark { /* ── Backgrounds ── */ --bg-body: #0F0A1E; --bg-card: rgba(30, 19, 64, 0.7); --bg-card-solid: #1E1340; --bg-header: rgba(15, 10, 30, 0.85); /* ── Cream aliases (used everywhere via var(--cream*)) ── */ --cream: #0F0A1E; --cream-card: #1E1340; --cream-border: #3B2B5E; --cream-hover: #2D1B4E; /* ── Accent backgrounds (tinted surfaces) ── */ --sage-bg: #2D1B4E; --teal-bg: #2D1B4E; --peach-bg: #2D1B4E; /* ── Warm text ── */ --warm-text: #F3F4F6; --warm-text-alt: #D1D5DB; --warm-text-light: #9CA3AF; --warm-text-muted: #6B7280; /* ── Semantic text ── */ --text-primary: #F3F4F6; --text-secondary: #9CA3AF; --text-muted: #6B7280; /* ── Card shadow ── */ --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.25); /* ── Buttons ── */ --button-secondary-bg: #2D1B4E; --button-secondary-text: #F3F4F6; /* ── Inputs ── */ --input-bg: #1E1340; --input-border: #3B2B5E; --input-text: #F3F4F6; --input-placeholder: #6B7280; /* ── Flash / alert surfaces ── */ --success-bg: rgba(46, 125, 50, 0.18); --success-text: #86EFAC; --error-bg: rgba(198, 40, 40, 0.18); --error-text: #FCA5A5; --warning-bg: rgba(245, 127, 23, 0.18); --warning-text: #FCD34D; --info-bg: rgba(21, 101, 192, 0.18); --info-text: #93C5FD; } /* Skeleton shimmer: re-tint for dark backgrounds */ html.dark .skeleton { background: linear-gradient(90deg, #2D1B4E 25%, #1E1340 50%, #2D1B4E 75%); background-size: 200% 100%; } /* ======================== Brand Gradient (Purple Palette) ======================== */ .brand-gradient { background-color: #6d4f3e; } .brand-gradient-horizontal { background-color: #6d4f3e; } .brand-gradient-text { color: #6d4f3e; } .brand-gradient-border { border-color: #6d4f3e; } .brand-gradient-shadow { box-shadow: 0 4px 15px -3px rgba(109, 79, 62, 0.3), 0 2px 6px -2px rgba(109, 79, 62, 0.2); } .brand-gradient-alt { background-color: #829bab; } /* ======================== Skeleton Loading Animation ======================== */ .skeleton { background: linear-gradient(90deg, var(--cream-hover) 25%, var(--cream) 50%, var(--cream-hover) 75%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: 0.5rem; } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* ======================== Scrollbar Styling ======================== */ .vendor-scroll::-webkit-scrollbar { width: 6px; } .vendor-scroll::-webkit-scrollbar-track { background: transparent; } .vendor-scroll::-webkit-scrollbar-thumb { background: var(--cream-border); border-radius: 3px; } .vendor-scroll::-webkit-scrollbar-thumb:hover { background: var(--purple-400); } /* ======================== Chat Conversation Item States ======================== */ .chat-item { transition: background-color 150ms ease; } .chat-item:hover:not(.conv-active) { background-color: #EDE9FE; } .chat-item.conv-active { background-color: var(--sage-bg); } .conv-item-avatar { background-color: #d1d5db; color: white; transition: background-color 150ms ease; } .chat-item:hover:not(.conv-active) .conv-item-avatar, .chat-item.conv-active .conv-item-avatar { background-color: var(--sage); } .dark .conv-item-avatar { background-color: #4b5563; } .dark .chat-item:hover:not(.conv-active) { background-color: #374151; } .dark .chat-item.conv-active { background-color: rgba(139, 92, 246, 0.1); } .dark .chat-item:hover:not(.conv-active) .conv-item-avatar, .dark .chat-item.conv-active .conv-item-avatar { background-color: var(--sage); } /* ======================== Glassmorphism Utilities ======================== */ .glass-card { background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 1rem; } /* ======================== Sidebar Dark Theme ======================== */ .sidebar-dark { background: linear-gradient(180deg, #1E1340 0%, #2D1B69 50%, #1E1340 100%); color: rgba(255,255,255,0.7); }