/* ========================================================================== VAREON — Theme tokens Single source of truth for colour across the public site and admin panel. Light is the default. Dark is opt-in via [data-theme="dark"] on . ========================================================================== */ :root, [data-theme="light"] { color-scheme: light; /* Brand */ --brand-gold: #c9a227; --brand-gold-deep: #8a6e12; /* Page background */ --bg: #f6f3ec; --bg-2: #ece7dc; /* Surfaces — panels, cards, nav. Used as rgba(var(--surface-rgb), a) */ --surface-rgb: 255, 255, 255; --surface: #ffffff; --card: rgba(255, 255, 255, 0.94); --panel: rgba(255, 255, 255, 0.98); /* Type */ --text: #15181d; --muted: #4f5763; /* Accent — used as rgba(var(--accent-rgb), a) for glows and tints */ --accent-rgb: 201, 162, 39; --accent: #c9a227; --accent-dark: #73580d; --accent-soft: #f6ecd2; --on-accent: #1a1405; --on-media: #ffffff; /* text over photos / dark overlays — never flips */ --gold: var(--accent-dark); /* Structure */ --border: rgba(21, 24, 29, 0.16); --border-strong: rgba(21, 24, 29, 0.24); --border-soft: rgba(21, 24, 29, 0.06); /* Shadows — used as rgba(var(--shadow-rgb), a) */ --shadow-rgb: 46, 38, 16; --shadow: 0 28px 90px rgba(46, 38, 16, 0.14); --shadow-soft: 0 16px 45px rgba(46, 38, 16, 0.09); /* Status */ --danger: #b4232f; --success: #17915f; --warn: #c98a1f; --page-glow-1: rgba(201, 162, 39, 0.16); --page-glow-2: rgba(255, 255, 255, 0.85); --page-glow-3: rgba(138, 110, 18, 0.10); } [data-theme="dark"] { color-scheme: dark; --brand-gold: #e0b63f; --brand-gold-deep: #c9a227; --bg: #0f1419; --bg-2: #0a0e12; --surface-rgb: 22, 29, 39; --surface: #161d27; --card: rgba(22, 29, 39, 0.96); --panel: rgba(22, 29, 39, 0.99); --text: #eef1f6; --muted: #b8c1ce; --accent-rgb: 224, 182, 63; --accent: #e0b63f; --accent-dark: #c9a227; --accent-soft: rgba(224, 182, 63, 0.14); --on-accent: #141004; --on-media: #ffffff; --gold: var(--accent-dark); --border: rgba(238, 241, 246, 0.18); --border-strong: rgba(238, 241, 246, 0.28); --border-soft: rgba(238, 241, 246, 0.07); --shadow-rgb: 0, 0, 0; --shadow: 0 28px 90px rgba(0, 0, 0, 0.55); --shadow-soft: 0 16px 45px rgba(0, 0, 0, 0.42); --danger: #f26363; --success: #35c48d; --warn: #e0b63f; --page-glow-1: rgba(224, 182, 63, 0.12); --page-glow-2: rgba(224, 182, 63, 0.05); --page-glow-3: rgba(0, 0, 0, 0.45); } /* Smooth, but never on first paint (theme.js sets .theme-ready) */ html.theme-ready body, html.theme-ready body * { transition: background-color .28s ease, border-color .28s ease, color .28s ease; } html.theme-ready .no-theme-transition, html.theme-ready .no-theme-transition * { transition: none !important; } /* Images that need to survive both themes */ [data-theme="dark"] img.invert-on-dark { filter: brightness(0) invert(1); } /* -------------------------------------------------------------------------- Theme toggle control — shared by site + admin -------------------------------------------------------------------------- */ .theme-toggle { --tt-size: 42px; position: relative; width: var(--tt-size); height: var(--tt-size); flex: 0 0 auto; display: grid; place-items: center; border-radius: 14px; cursor: pointer; border: 1px solid var(--border); background: rgba(var(--surface-rgb), 0.65); color: var(--text); box-shadow: var(--shadow-soft); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform .18s ease, border-color .18s ease, background .18s ease; } .theme-toggle:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb), 0.55); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Theme text is an accessibility label on desktop, not visible UI. Keep it visually hidden at the shared component level so pages that do not load public.css (for example Contact) can never render "Dark"/"Light" on top of the icon. Mobile navigation supplies its own clean ::after label. */ .theme-toggle .sr-only, .theme-toggle [data-theme-label] { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } .theme-toggle svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; position: absolute; transition: opacity .22s ease, transform .32s cubic-bezier(.34,1.56,.64,1); } .theme-toggle .icon-sun { opacity: 0; transform: rotate(-70deg) scale(.55); } .theme-toggle .icon-moon { opacity: 1; transform: rotate(0) scale(1); } [data-theme="dark"] .theme-toggle .icon-sun { opacity: 1; transform: rotate(0) scale(1); color: var(--accent); } [data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(70deg) scale(.55); } .theme-toggle--labelled { width: auto; padding: 0 16px 0 40px; border-radius: 999px; font: 600 .84rem/1 "Manrope", system-ui, sans-serif; letter-spacing: .02em; } .theme-toggle--labelled svg { left: 13px; } /* Monospace treatment for numeric/spec data (prices, ids, codes) */ .mono, .price, .spec-value, .stat-value { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* ==========================================================================\n Contrast hardening — public site + admin\n Keeps form controls, cards and native select options readable in both modes.\n ========================================================================== */ :root, [data-theme="light"] { --field-bg: #ffffff; --field-placeholder: #68707c; } [data-theme="dark"] { --field-bg: #101720; --field-placeholder: #8f9aab; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="search"], input[type="tel"], select, textarea { background-color: var(--field-bg) !important; color: var(--text) !important; border-color: var(--border-strong) !important; } input::placeholder, textarea::placeholder { color: var(--field-placeholder) !important; opacity: 1; } select option { background: var(--surface); color: var(--text); } [data-theme-scope="admin"] .topbar, [data-theme-scope="admin"] .panel, [data-theme-scope="admin"] .login-card, [data-theme-scope="admin"] .card, [data-theme-scope="admin"] .property-card { background: var(--panel) !important; border-color: var(--border-strong) !important; } [data-theme-scope="admin"] .nav-link, [data-theme-scope="admin"] .lang-toggle, [data-theme-scope="admin"] .btn.secondary, [data-theme-scope="admin"] .badge, [data-theme-scope="admin"] .main-badge { font-weight: 900; } [data-theme-scope="admin"] label, [data-theme-scope="admin"] h1, [data-theme-scope="admin"] h2, [data-theme-scope="admin"] h3, [data-theme-scope="admin"] strong { color: var(--text); } [data-theme-scope="admin"] .hint, [data-theme-scope="admin"] .brand p, [data-theme-scope="admin"] .panel-head p, [data-theme-scope="admin"] .hero p, [data-theme-scope="admin"] .card span, [data-theme-scope="admin"] .property-location, [data-theme-scope="admin"] .empty-state, [data-theme-scope="admin"] .image-path { color: var(--muted) !important; } /* Glass surfaces need more separation in dark mode. */ [data-theme="dark"] .nav-inner, [data-theme="dark"] .dropdown, [data-theme="dark"] .stat, [data-theme="dark"] .featured-card, [data-theme="dark"] .property-card, [data-theme="dark"] .about, [data-theme="dark"] .about-metric, [data-theme="dark"] .contact-card, [data-theme="dark"] .info-box { border-color: var(--border-strong) !important; }