/* RoboRealEstate — Theme & Brand ------------------------------ Single source of truth for colors, type, spacing, themes. Switch themes by setting `data-theme="dark|light|colorful|muted"` on . Brand palette: #101056 indigo (primary) #eaa80c gold (accent) #b76e79 rose (highlight) #e2e3e4 cloud (neutral) #ffffff white */ :root, :root[data-theme='light'] { --indigo: #101056; --indigo-700: #1a1a6b; --gold: #eaa80c; --gold-700: #c98e08; --rose: #b76e79; --cloud: #e2e3e4; --white: #ffffff; --bg: #f7f7f9; --bg-elevated: #ffffff; --surface: #ffffff; --border: #e2e3e4; --text: #14143a; --text-muted: #5b5b78; --primary: var(--indigo); --primary-on: var(--white); --accent: var(--gold); --accent-on: #2a1d00; --danger: #c0392b; --success: #1f7a4d; --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(16, 16, 86, 0.06); --shadow: 0 4px 12px rgba(16, 16, 86, 0.08); --shadow-lg: 0 16px 40px rgba(16, 16, 86, 0.14); --font-display: 'Cormorant Garamond', 'Didot', 'Times New Roman', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } :root[data-theme='dark'] { --bg: #0a0a26; --bg-elevated: #131340; --surface: #1a1a55; --border: #2c2c6e; --text: #f3f3fa; --text-muted: #a4a4c4; --primary: var(--gold); --primary-on: #14143a; --accent: var(--rose); --accent-on: #ffffff; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6); } :root[data-theme='colorful'] { --bg: #fff7e6; --bg-elevated: #ffffff; --surface: #ffffff; --border: #f3d68b; --text: #14143a; --text-muted: #6b5b3d; --primary: var(--rose); --primary-on: #ffffff; --accent: var(--indigo); --accent-on: #ffffff; } :root[data-theme='muted'] { --bg: #f3f3f3; --bg-elevated: #fafafa; --surface: #ffffff; --border: #d8d8d8; --text: #2a2a35; --text-muted: #6a6a78; --primary: #4a4a6a; --primary-on: #ffffff; --accent: #8a7a55; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 0.5em; } h1 { font-size: clamp(2rem, 5vw, 3.5rem); } h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); } h3 { font-size: 1.25rem; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } button, .btn { font-family: inherit; font-size: 0.95rem; font-weight: 500; padding: 0.65rem 1.2rem; border: 1px solid var(--primary); background: var(--primary); color: var(--primary-on); border-radius: var(--radius-sm); cursor: pointer; transition: transform 0.06s ease, box-shadow 0.2s ease, background 0.2s ease; } button:hover, .btn:hover { box-shadow: var(--shadow); } button:active, .btn:active { transform: translateY(1px); } button.ghost, .btn.ghost { background: transparent; color: var(--primary); } button.accent, .btn.accent { background: var(--accent); color: var(--accent-on); border-color: var(--accent); } input, select, textarea { font-family: inherit; font-size: 1rem; padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); width: 100%; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.25rem; } .container { max-width: 1200px; margin: 0 auto; padding: 1.5rem; } .muted { color: var(--text-muted); } .right { text-align: right; } .row { display: flex; gap: 1rem; align-items: center; } .row.wrap { flex-wrap: wrap; } .spacer { flex: 1; } .pill { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.78rem; background: var(--cloud); color: var(--text); } .pill.gold { background: var(--gold); color: #2a1d00; } .pill.indigo { background: var(--indigo); color: #fff; } .pill.rose { background: var(--rose); color: #fff; } .brand-mark { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.02em; } .brand-mark .dot { color: var(--accent); }