/* ============================================================================ HAVENLY DESIGN SYSTEM — DARK MODE Drop after havenly-ds.css. Toggle by setting [data-theme="dark"] on . How it works: - The CORE palette stays the same (hex values don't change) - The SEMANTIC layer remaps — text/surface/border/action point to new cores - Components use semantic tokens, so they adapt automatically - Shadows invert from blue-tinted on white → subtle white-glow on dark ============================================================================ */ /* Smooth color transition when toggling themes */ html { transition: background-color 240ms cubic-bezier(0.45, 0.05, 0.55, 0.95), color 240ms cubic-bezier(0.45, 0.05, 0.55, 0.95); } *, *::before, *::after { transition-property: background-color, border-color, color, fill, stroke; transition-duration: 240ms; transition-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95); } /* But don't slow down explicit transitions on hovers/transforms */ *:where(:hover, :focus-visible) { transition-duration: 200ms; } @media (prefers-reduced-motion: reduce) { html, *, *::before, *::after { transition-duration: 0.01ms !important; } } /* ===== DARK MODE TOKEN OVERRIDES ===== */ [data-theme="dark"] { /* Text — invert the neutral scale */ --hv-color-text-default: var(--hv-core-neutral-25); /* near-white */ --hv-color-text-strong: var(--hv-core-neutral-0); /* pure white for headings */ --hv-color-text-default-subdued: var(--hv-core-neutral-200); --hv-color-text-muted: var(--hv-core-neutral-300); --hv-color-text-quiet: var(--hv-core-neutral-400); --hv-color-text-inverse: var(--hv-core-neutral-990); --hv-color-text-brand: var(--hv-core-brand-400); --hv-color-text-brand-strong: var(--hv-core-brand-300); /* Surfaces — go deep blue-black, NOT pure black (warmer feel) */ --hv-color-surface-default: #0a1424; /* base bg */ --hv-color-surface-subdued: #0f1a2e; /* sectioned bg */ --hv-color-surface-muted: #16243a; /* card bg */ --hv-color-surface-deep: var(--hv-core-neutral-0); /* invert: dark deep becomes white card */ --hv-color-surface-brand: var(--hv-core-brand-500); --hv-color-surface-brand-deep: var(--hv-core-brand-700); /* Borders — slightly lighter than surface, low opacity */ --hv-color-border-default: rgba(255, 255, 255, 0.10); --hv-color-border-subtle: rgba(255, 255, 255, 0.06); --hv-color-border-strong: rgba(255, 255, 255, 0.18); --hv-color-border-brand: rgba(127, 125, 252, 0.32); --hv-color-border-focus: var(--hv-core-brand-400); /* Actions — keep the brand color but lighten slightly */ --hv-color-action-primary: var(--hv-core-brand-500); --hv-color-action-primary-hover: var(--hv-core-brand-400); --hv-color-action-primary-active: var(--hv-core-brand-300); --hv-color-action-quiet: rgba(127, 125, 252, 0.12); --hv-color-action-quiet-hover: rgba(127, 125, 252, 0.20); /* Shadows — replace blue-tinted shadows with subtle white-glow + deep ambient */ --hv-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.30), inset 0 1px 0 0 rgba(255, 255, 255, 0.03); --hv-shadow-sm: 0 2px 10px 0 rgba(0, 0, 0, 0.35), inset 0 1px 0 0 rgba(255, 255, 255, 0.04); --hv-shadow-md: 0 5px 14px 0 rgba(0, 0, 0, 0.40), inset 0 1px 0 0 rgba(255, 255, 255, 0.05); --hv-shadow-lg: 0 6px 22px 0 rgba(0, 0, 0, 0.45), inset 0 1px 0 0 rgba(255, 255, 255, 0.06); --hv-shadow-xl: 0 15px 40px -2px rgba(0, 0, 0, 0.50), inset 0 1px 0 0 rgba(255, 255, 255, 0.08); --hv-shadow-2xl: 0 20px 80px -16px rgba(0, 0, 0, 0.60), inset 0 1px 0 0 rgba(255, 255, 255, 0.10); --hv-shadow-pop: 0 16px 32px rgba(0, 0, 0, 0.40), 0 6px 12px rgba(0, 0, 0, 0.20), inset 0 1px 0 0 rgba(255, 255, 255, 0.08); /* Gradients tuned for dark backgrounds */ --hv-gradient-brand: linear-gradient(135deg, #7f7dfc 0%, #533afd 60%, #4032c8 100%); --hv-gradient-night: linear-gradient(180deg, #0a1424 0%, #16243a 100%); --hv-gradient-dawn: linear-gradient(180deg, #1c1e54 0%, #2e2b8c 100%); } /* ===== DARK MODE COMPONENT ADJUSTMENTS ===== */ [data-theme="dark"] body { background: var(--hv-color-surface-default); } /* Card-deep semantically means "inverted from default surface" — flip behavior */ [data-theme="dark"] .hv-card--deep { background: var(--hv-color-surface-muted); color: var(--hv-color-text-default); border: 1px solid var(--hv-color-border-subtle); } /* Inverse buttons need a dark background in dark mode (since "inverse" means contrasted from the page) */ [data-theme="dark"] .hv-button--inverse { --hv-btn-bg: var(--hv-color-surface-muted); --hv-btn-fg: var(--hv-color-text-default); --hv-btn-bg-hover: var(--hv-color-action-quiet); --hv-btn-fg-hover: var(--hv-color-text-brand); } /* Property card hover shadow in dark mode is glow rather than drop */ [data-theme="dark"] .hv-property:hover { box-shadow: 0 20px 60px -10px rgba(127, 125, 252, 0.25), inset 0 1px 0 0 rgba(255, 255, 255, 0.06); } /* Tag accent variants — keep saturation but darker bg/lighter text in dark mode */ [data-theme="dark"] .hv-tag--lemon { background: rgba(232, 163, 11, 0.15); color: #ffd166; border-color: rgba(232, 163, 11, 0.3); } [data-theme="dark"] .hv-tag--magenta { background: rgba(207, 44, 171, 0.15); color: #f88bdf; border-color: rgba(207, 44, 171, 0.3); } [data-theme="dark"] .hv-tag--orange { background: rgba(208, 73, 0, 0.15); color: #ff8a5b; border-color: rgba(208, 73, 0, 0.3); } [data-theme="dark"] .hv-tag--sage { background: rgba(45, 134, 80, 0.15); color: #6eb88a; border-color: rgba(45, 134, 80, 0.3); } [data-theme="dark"] .hv-tag--brand { background: rgba(83, 58, 253, 0.15); color: #b9b9f9; border-color: rgba(83, 58, 253, 0.3); } [data-theme="dark"] .hv-tag--dark { background: #fff; color: #061b31; } /* Inputs in dark mode */ [data-theme="dark"] .hv-input { background: var(--hv-color-surface-muted); border-color: var(--hv-color-border-default); color: var(--hv-color-text-default); } [data-theme="dark"] .hv-input::placeholder { color: var(--hv-color-text-quiet); } /* Demo image placeholders look weird in dark mode — keep them as-is but the property card frame will adapt around them */ /* Mesh background — much more saturated in dark mode for visibility */ [data-theme="dark"] .hv-mesh::before { background: radial-gradient(circle at 18% 24%, rgba(127, 125, 252, 0.30), transparent 42%), radial-gradient(circle at 82% 30%, rgba(255, 138, 91, 0.18), transparent 38%), radial-gradient(circle at 58% 88%, rgba(248, 139, 223, 0.20), transparent 45%); } /* Scrollbar styling (WebKit) — match dark theme */ [data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--hv-color-surface-default); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 6px; border: 3px solid var(--hv-color-surface-default); } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.20); } /* ── v2 booking components ── */ [data-theme="dark"] { --hv-color-best-fg: var(--hv-core-brand-300); --hv-color-best-border: rgba(127, 125, 252, 0.4); } [data-theme="dark"] .hv-card-listing__body::before { background: linear-gradient(to top, rgba(6,27,49,.62), rgba(6,27,49,.28) 60%, rgba(6,27,49,.06) 100%); }