/* ========================================================================== PETRAGON — 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-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; }