/** * ClientFirst AI - Theme Variables (single source of truth) * Dark and light themes in one file. Change values here to adjust branding. * Apply theme via data-theme="dark" | "light" on . */ /* ========== DARK THEME (default) – Gold + Dark Navy/Black ========== */ :root { /* Surfaces */ --surface-base: #0B0B0C; --surface-base-rgb: 11, 11, 12; --surface-card: #141414; --surface-hover: #1C1C1E; --surface-elevated: #242426; /* Gold accent */ --gold-primary: #F5C86A; --gold-light: #F8D89A; --gold-dark: #D4A855; --gold-glow: rgba(245, 200, 106, 0.3); --primary-gradient: linear-gradient(135deg, #F5C86A 0%, #D4A855 100%); --primary-gradient-hover: linear-gradient(135deg, #F8D89A 0%, #F5C86A 100%); /* Gold borders/backgrounds (for components) */ --gold-border: rgba(245, 200, 106, 0.2); --gold-border-hover: rgba(245, 200, 106, 0.4); --gold-bg-subtle: rgba(245, 200, 106, 0.1); --card-accent-gradient: linear-gradient(90deg, transparent, rgba(245, 200, 106, 0.3), transparent); /* Semantic */ --success: #10b981; --warning: #F5C86A; --error: #ef4444; --info: #3b82f6; /* Text */ --text-primary: #ffffff; --text-secondary: #E5E5E7; --text-muted: #8E8E93; --text-disabled: #636366; --text-on-accent: #0B0B0C; /* Accent aliases */ --accent-gold: #F5C86A; --accent-gold-hover: #F8D89A; /* Borders (theme-aware) */ --border-subtle: rgba(255, 255, 255, 0.06); --border-card: rgba(255, 255, 255, 0.08); --overlay-bg: rgba(11, 11, 12, 0.95); --input-bg: rgba(255, 255, 255, 0.05); --input-bg-focus: rgba(255, 255, 255, 0.08); --input-placeholder: rgba(255, 255, 255, 0.4); /* Shadows */ --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.6); --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.7); --shadow-gold: 0 4px 20px rgba(245, 200, 106, 0.3); --shadow-gold-hover: 0 6px 30px rgba(245, 200, 106, 0.5); /* Radius */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; } /* ========== LIGHT THEME – Warm Cream Premium (matching design mockup) ========== */ [data-theme="light"] { /* Surfaces – warm cream background, soft ivory cards, gentle layering */ --surface-base: #F2E9DA; --surface-base-rgb: 242, 233, 218; --surface-card: #FBF6EF; --surface-hover: #EDE0CE; --surface-elevated: #FEFCF8; /* Warm tan/gold accent – matching the muted gold tones in the image */ --gold-primary: #C8A96E; --gold-light: #DFC28E; --gold-dark: #A07840; --gold-glow: rgba(200, 169, 110, 0.3); --primary-gradient: linear-gradient(135deg, #DFC28E 0%, #C8A96E 50%, #A07840 100%); --primary-gradient-hover: linear-gradient(135deg, #E8CC9A 0%, #DFC28E 100%); /* Warm gold borders/backgrounds */ --gold-border: rgba(200, 169, 110, 0.35); --gold-border-hover: rgba(200, 169, 110, 0.6); --gold-bg-subtle: rgba(200, 169, 110, 0.12); --card-accent-gradient: linear-gradient(90deg, transparent, rgba(200, 169, 110, 0.2), transparent); /* Semantic */ --success: #0D9668; --warning: #A07840; --error: #DC2626; --info: #2563EB; /* Text – warm dark brown headings, soft warm secondary */ --text-primary: #2C1F0E; --text-secondary: #5A4535; --text-muted: #8C7B68; --text-disabled: #BCA898; --text-on-accent: #FFFFFF; /* Accent aliases */ --accent-gold: #C8A96E; --accent-gold-hover: #DFC28E; /* Borders – warm cream tint borders */ --border-subtle: rgba(140, 100, 50, 0.1); --border-card: rgba(140, 100, 50, 0.12); --overlay-bg: rgba(242, 233, 218, 0.98); --input-bg: rgba(140, 100, 50, 0.06); --input-bg-focus: rgba(200, 169, 110, 0.1); --input-placeholder: rgba(90, 69, 53, 0.5); /* Shadows – warm-tinted soft shadows (no cold greys) */ --shadow-sm: 0 1px 4px rgba(160, 120, 64, 0.12), 0 1px 2px rgba(160, 120, 64, 0.08); --shadow-md: 0 4px 12px rgba(160, 120, 64, 0.12), 0 2px 6px rgba(160, 120, 64, 0.08); --shadow-lg: 0 10px 24px rgba(160, 120, 64, 0.12), 0 4px 10px rgba(160, 120, 64, 0.08); --shadow-xl: 0 20px 40px rgba(160, 120, 64, 0.12), 0 8px 16px rgba(160, 120, 64, 0.08); --shadow-gold: 0 4px 16px rgba(200, 169, 110, 0.35), 0 2px 8px rgba(200, 169, 110, 0.2); --shadow-gold-hover: 0 6px 24px rgba(200, 169, 110, 0.45), 0 3px 12px rgba(200, 169, 110, 0.3); } .lp-lead-detail { padding: 20px; } .lp-lead-detail-header { margin-bottom: 20px; } .lp-lead-detail-tabs { display: flex; gap: 4px; margin-bottom: 24px; border-bottom: 1px solid var(--lp-border-light, rgba(255,255,255,0.12)); padding-bottom: 0; } .lp-lead-tab { padding: 12px 20px; font-size: 14px; font-weight: 600; color: var(--lp-text-muted, #9ca3af); background: transparent; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color 0.2s, border-color 0.2s; } .lp-lead-tab:hover { color: var(--lp-text, #fff); } .lp-lead-tab.active { color: var(--lp-accent); border-bottom-color: var(--lp-accent); } .lp-lead-tab-panel { min-height: 200px; } .lp-lead-case-docs { padding-top: 8px; } .lp-lead-chat-panel { padding-top: 8px; } .lp-lead-chat-panel .lawyer-chat-card.lp-embed { border: 1px solid var(--lp-border-panel, rgba(255,255,255,0.1)); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; height: 80vh; } .lp-lead-chat-panel .lawyer-chat-status { padding: 10px 16px; font-size: 13px; color: var(--lp-text-muted); border-bottom: 1px solid var(--lp-border-light); } .lp-lead-chat-panel .lawyer-chat-messages { flex: 1; overflow-y: auto; padding: 16px; } .lp-lead-chat-panel .lawyer-chat-composer { padding: 12px 16px; border-top: 1px solid var(--lp-border-light); display: flex; flex-direction: column; gap: 8px; } .lp-lead-chat-panel .lawyer-chat-composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .lp-lead-chat-panel .lawyer-chat-input { width: 100%; min-height: 60px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--lp-border-light); background: var(--lp-bg-input); color: #fff; font-size: 14px; resize: vertical; } .lp-lead-chat-panel .lawyer-chat-error-banner { padding: 12px 16px; color: #f87171; font-size: 13px; } .lp-lead-chat-panel .lawyer-chat-empty { padding: 24px; text-align: center; color: var(--lp-text-muted); } .lp-lead-chat-panel .lawyer-chat-msg-wrapper { margin-bottom: 12px; } .lp-lead-chat-panel .lawyer-chat-msg-label { font-size: 11px; font-weight: 600; margin-bottom: 2px; } .lp-lead-chat-panel .lawyer-chat-msg-body { margin: 0 0 4px; font-size: 14px; } .lp-lead-chat-panel .lawyer-chat-msg-time { font-size: 11px; color: var(--lp-text-muted); } .lp-btn-back { color: var(--lp-accent); text-decoration: none; font-size: 14px; display: inline-block; margin-bottom: 8px; } .lp-btn-back:hover { text-decoration: underline; } .lp-lead-detail-title { font-size: 1.5rem; font-weight: 700; color: var(--lp-text); margin: 0 0 16px 0; } .lp-lead-detail-body { display: flex; flex-direction: column; gap: 20px; } .lp-lead-detail-card { background: var(--lp-card-bg); border: 1px solid var(--lp-border-light); border-radius: 12px; padding: 20px; } .lp-lead-detail-card-title { font-size: 1rem; font-weight: 600; color: var(--lp-text); margin: 0 0 12px 0; } .lp-lead-detail-text { color: var(--lp-text-muted); margin: 0; white-space: pre-wrap; } .lp-dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; } .lp-dl dt { color: var(--lp-text-muted); font-weight: 500; } .lp-dl dd { margin: 0; color: var(--lp-text); } .lp-json-block { background: rgba(0,0,0,0.25); border-radius: 8px; padding: 12px; font-size: 12px; overflow-x: auto; margin: 12px 0 0 0; white-space: pre-wrap; word-break: break-all; color: var(--lp-text-muted); } .lp-lead-detail-actions { margin-top: 8px; } .lp-link { color: var(--lp-accent); text-decoration: none; } .lp-link:hover { text-decoration: underline; }