/* ================================================================ Holdfast App Theme System Three themes: dark (default), warm, light Applied via data-app-theme attribute on ================================================================ */ /* ── CSS Variables per theme ── */ :root, [data-app-theme="dark"] { --app-bg: #0a1628; --app-bg-alt: #0f2240; --app-surface: #1a3358; --app-surface-hover: #254470; --app-border: #1a3358; --app-border-light: #254470; --app-ink: #ffffff; --app-text: #9ca3af; --app-text-secondary: #6b7280; --app-text-muted: #4b5563; --app-accent: #e8b931; --app-accent-hover: #f5cc4d; --app-accent-on: #0a1628; --app-input-bg: #1a3358; --app-input-border: #254470; --app-input-focus: #3d7ab8; } [data-app-theme="warm"] { --app-bg: #0D0A07; --app-bg-alt: #14100B; --app-surface: #1A1510; --app-surface-hover: #2E2720; --app-border: #2E2720; --app-border-light: #3D352B; --app-ink: #FEF3C7; --app-text: #BFB094; --app-text-secondary: #8A7D6B; --app-text-muted: #5C5347; --app-accent: #F59E0B; --app-accent-hover: #FBBF24; --app-accent-on: #0D0A07; --app-input-bg: #1A1510; --app-input-border: #2E2720; --app-input-focus: #F59E0B; } [data-app-theme="light"] { --app-bg: #FAF9F7; --app-bg-alt: #F3F1ED; --app-surface: #FFFFFF; --app-surface-hover: #F3F1ED; --app-border: #E0DBD3; --app-border-light: #D5CFC7; --app-ink: #1A1510; --app-text: #6B6155; --app-text-secondary: #8A8278; --app-text-muted: #A8A198; --app-accent: #D97706; --app-accent-hover: #F59E0B; --app-accent-on: #FFFFFF; --app-input-bg: #FFFFFF; --app-input-border: #E0DBD3; --app-input-focus: #D97706; } /* ================================================================ WARM THEME OVERRIDES ================================================================ */ /* -- Backgrounds -- */ [data-app-theme="warm"] .bg-navy-950 { background-color: #0D0A07 !important; } [data-app-theme="warm"] .bg-navy-900 { background-color: #14100B !important; } [data-app-theme="warm"] .bg-navy-800 { background-color: #1A1510 !important; } [data-app-theme="warm"] .bg-navy-700 { background-color: #2E2720 !important; } /* -- Borders -- */ [data-app-theme="warm"] .border-navy-800 { border-color: #2E2720 !important; } [data-app-theme="warm"] .border-navy-700 { border-color: #3D352B !important; } [data-app-theme="warm"] .border-navy-600 { border-color: #4A4035 !important; } [data-app-theme="warm"] .border-navy-500 { border-color: #F59E0B !important; } /* -- Text -- */ [data-app-theme="warm"] .text-white { color: #FEF3C7 !important; } [data-app-theme="warm"] .text-gray-200 { color: #E8DCC8 !important; } [data-app-theme="warm"] .text-gray-300 { color: #D4C8B4 !important; } [data-app-theme="warm"] .text-gray-400 { color: #BFB094 !important; } [data-app-theme="warm"] .text-gray-500 { color: #8A7D6B !important; } [data-app-theme="warm"] .text-gray-600 { color: #5C5347 !important; } [data-app-theme="warm"] .text-gray-700 { color: #4A3F35 !important; } [data-app-theme="warm"] .text-gray-800 { color: #3D352B !important; } /* -- Hover text -- */ [data-app-theme="warm"] .hover\:text-white:hover { color: #FEF3C7 !important; } [data-app-theme="warm"] .hover\:text-gray-300:hover { color: #D4C8B4 !important; } [data-app-theme="warm"] .hover\:text-gray-400:hover { color: #BFB094 !important; } /* -- Hover borders -- */ [data-app-theme="warm"] .hover\:border-navy-600:hover { border-color: #4A4035 !important; } [data-app-theme="warm"] .hover\:border-navy-500:hover { border-color: #F59E0B !important; } /* -- Hover backgrounds -- */ [data-app-theme="warm"] .hover\:bg-navy-700:hover { background-color: #2E2720 !important; } [data-app-theme="warm"] .hover\:bg-navy-800:hover { background-color: #1A1510 !important; } /* -- Accent -- */ [data-app-theme="warm"] .bg-accent { background-color: #F59E0B !important; } [data-app-theme="warm"] .hover\:bg-accent-hover:hover { background-color: #FBBF24 !important; } [data-app-theme="warm"] .text-accent { color: #F59E0B !important; } [data-app-theme="warm"] .text-navy-950 { color: #0D0A07 !important; } [data-app-theme="warm"] .text-navy-400 { color: #8A7D6B !important; } [data-app-theme="warm"] .text-navy-500 { color: #5C5347 !important; } /* -- Ring/Focus -- */ [data-app-theme="warm"] .focus\:border-navy-500:focus { border-color: #F59E0B !important; } [data-app-theme="warm"] .focus\:ring-navy-500:focus { --tw-ring-color: #F59E0B !important; } /* -- Chat bubbles -- */ [data-app-theme="warm"] .chat-bubble-user { background-color: #2E2720 !important; color: #FEF3C7 !important; } [data-app-theme="warm"] .chat-bubble-assistant { background-color: #14100B !important; color: #D4C8B4 !important; } [data-app-theme="warm"] .first-contact-input { background-color: #1A1510 !important; border-color: #2E2720 !important; color: #FEF3C7 !important; } [data-app-theme="warm"] .first-contact-input:focus { border-color: #F59E0B !important; } [data-app-theme="warm"] .first-contact-input::placeholder { color: #5C5347 !important; } [data-app-theme="warm"] .first-contact-send { background-color: #F59E0B !important; color: #0D0A07 !important; } [data-app-theme="warm"] .first-contact-send:hover { background-color: #FBBF24 !important; } /* -- Misc warm -- */ [data-app-theme="warm"] .placeholder-gray-600::placeholder { color: #5C5347 !important; } [data-app-theme="warm"] .typing-dot { background-color: #8A7D6B !important; } [data-app-theme="warm"] .bg-accent\/20 { background-color: rgba(245,158,11,0.2) !important; } /* ================================================================ LIGHT THEME OVERRIDES ================================================================ */ /* -- Backgrounds -- */ [data-app-theme="light"] .bg-navy-950 { background-color: #FAF9F7 !important; } [data-app-theme="light"] .bg-navy-900 { background-color: #FFFFFF !important; } [data-app-theme="light"] .bg-navy-800 { background-color: #F3F1ED !important; } [data-app-theme="light"] .bg-navy-700 { background-color: #E8E4DE !important; } /* -- Borders -- */ [data-app-theme="light"] .border-navy-800 { border-color: #E0DBD3 !important; } [data-app-theme="light"] .border-navy-700 { border-color: #D5CFC7 !important; } [data-app-theme="light"] .border-navy-600 { border-color: #C8C1B8 !important; } [data-app-theme="light"] .border-navy-500 { border-color: #D97706 !important; } /* -- Text -- */ [data-app-theme="light"] .text-white { color: #1A1510 !important; } [data-app-theme="light"] .text-gray-200 { color: #3D352B !important; } [data-app-theme="light"] .text-gray-300 { color: #4A4035 !important; } [data-app-theme="light"] .text-gray-400 { color: #6B6155 !important; } [data-app-theme="light"] .text-gray-500 { color: #8A8278 !important; } [data-app-theme="light"] .text-gray-600 { color: #A8A198 !important; } [data-app-theme="light"] .text-gray-700 { color: #6B6155 !important; } [data-app-theme="light"] .text-gray-800 { color: #4A4035 !important; } /* -- Hover text -- */ [data-app-theme="light"] .hover\:text-white:hover { color: #1A1510 !important; } [data-app-theme="light"] .hover\:text-gray-300:hover { color: #4A4035 !important; } [data-app-theme="light"] .hover\:text-gray-400:hover { color: #6B6155 !important; } /* -- Hover borders -- */ [data-app-theme="light"] .hover\:border-navy-600:hover { border-color: #C8C1B8 !important; } [data-app-theme="light"] .hover\:border-navy-500:hover { border-color: #D97706 !important; } /* -- Hover backgrounds -- */ [data-app-theme="light"] .hover\:bg-navy-700:hover { background-color: #E8E4DE !important; } [data-app-theme="light"] .hover\:bg-navy-800:hover { background-color: #F3F1ED !important; } /* -- Accent -- */ [data-app-theme="light"] .bg-accent { background-color: #D97706 !important; } [data-app-theme="light"] .hover\:bg-accent-hover:hover { background-color: #F59E0B !important; } [data-app-theme="light"] .text-accent { color: #B45309 !important; } [data-app-theme="light"] .text-navy-950 { color: #FAF9F7 !important; } [data-app-theme="light"] .text-navy-400 { color: #8A8278 !important; } [data-app-theme="light"] .text-navy-500 { color: #A8A198 !important; } /* -- Ring/Focus -- */ [data-app-theme="light"] .focus\:border-navy-500:focus { border-color: #D97706 !important; } [data-app-theme="light"] .focus\:ring-navy-500:focus { --tw-ring-color: #D97706 !important; } /* -- Chat bubbles -- */ [data-app-theme="light"] .chat-bubble-user { background-color: #D97706 !important; color: #FFFFFF !important; } [data-app-theme="light"] .chat-bubble-assistant { background-color: #F3F1ED !important; color: #4A4035 !important; } [data-app-theme="light"] .first-contact-input { background-color: #FFFFFF !important; border-color: #E0DBD3 !important; color: #1A1510 !important; } [data-app-theme="light"] .first-contact-input:focus { border-color: #D97706 !important; } [data-app-theme="light"] .first-contact-input::placeholder { color: #A8A198 !important; } [data-app-theme="light"] .first-contact-send { background-color: #D97706 !important; color: #FFFFFF !important; } [data-app-theme="light"] .first-contact-send:hover { background-color: #F59E0B !important; } /* -- Misc light -- */ [data-app-theme="light"] .placeholder-gray-600::placeholder { color: #A8A198 !important; } [data-app-theme="light"] .typing-dot { background-color: #A8A198 !important; } [data-app-theme="light"] .bg-accent\/20 { background-color: rgba(217,119,6,0.2) !important; } /* -- Status badges: keep semantic colours but adjust opacity backgrounds for light -- */ [data-app-theme="light"] .bg-green-600 { background-color: #059669 !important; } [data-app-theme="light"] .hover\:bg-green-500:hover { background-color: #10B981 !important; } [data-app-theme="light"] .bg-red-500\/10 { background-color: rgba(239,68,68,0.08) !important; } [data-app-theme="light"] .border-red-500\/20 { border-color: rgba(239,68,68,0.15) !important; } [data-app-theme="light"] .border-red-500\/30 { border-color: rgba(239,68,68,0.2) !important; } /* -- Scrollbar tinting -- */ [data-app-theme="warm"] ::-webkit-scrollbar { width: 6px; } [data-app-theme="warm"] ::-webkit-scrollbar-track { background: #0D0A07; } [data-app-theme="warm"] ::-webkit-scrollbar-thumb { background: #2E2720; border-radius: 3px; } [data-app-theme="light"] ::-webkit-scrollbar { width: 6px; } [data-app-theme="light"] ::-webkit-scrollbar-track { background: #FAF9F7; } [data-app-theme="light"] ::-webkit-scrollbar-thumb { background: #D5CFC7; border-radius: 3px; } /* ================================================================ APP LOGO (orange bar + uppercase text, theme-aware) ================================================================ */ .hf-app-logo { font-size: 1.375rem; font-weight: 900; color: var(--app-ink); text-decoration: none; letter-spacing: -0.06em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.625rem; } .hf-app-logo::before { content: ''; display: inline-block; width: 0.5rem; height: 1.75rem; background: var(--app-accent); flex-shrink: 0; } /* ================================================================ THEME SWITCHER COMPONENT ================================================================ */ .theme-switcher { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 8px; background: var(--app-surface); border: 1px solid var(--app-border); } .theme-switcher button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; border: none; background: transparent; color: var(--app-text-secondary); cursor: pointer; transition: all 150ms ease; padding: 0; } .theme-switcher button:hover { color: var(--app-ink); background: var(--app-surface-hover); } .theme-switcher button.active { background: var(--app-accent); color: var(--app-accent-on); } .theme-switcher button svg { width: 14px; height: 14px; } /* ================================================================ BILLING PAGE INLINE OVERRIDES ================================================================ */ /* stat-ring inner circle */ [data-app-theme="warm"] .stat-ring::before { background: var(--app-bg-alt) !important; } [data-app-theme="light"] .stat-ring::before { background: var(--app-surface) !important; } /* progress-bar track */ [data-app-theme="warm"] .progress-bar { background: #2E2720 !important; } [data-app-theme="light"] .progress-bar { background: #E0DBD3 !important; } /* ================================================================ ADDITIONAL OVERRIDES ================================================================ */ /* Copilot sidebar border in conversation page */ [data-app-theme="warm"] .border-l.border-navy-800 { border-color: #2E2720 !important; } [data-app-theme="light"] .border-l.border-navy-800 { border-color: #E0DBD3 !important; } /* Chat bubble system messages */ [data-app-theme="warm"] .chat-bubble-system { color: #8A7D6B !important; } [data-app-theme="light"] .chat-bubble-system { color: #8A8278 !important; } /* Selection color */ [data-app-theme="warm"] ::selection { background: rgba(245,158,11,0.3); color: #FEF3C7; } [data-app-theme="light"] ::selection { background: rgba(217,119,6,0.2); color: #1A1510; } /* Smooth transition when switching themes */ [data-app-theme] body, [data-app-theme] header, [data-app-theme] main, [data-app-theme] .bg-navy-950, [data-app-theme] .bg-navy-900, [data-app-theme] .bg-navy-800 { transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; }