/*
 * Bold theme — dark chrome, saturated accent, price-forward cards. Inherits
 * the minimal theme and overrides only what differs.
 */
@import url("minimal.css");

:root {
    --brand: #0f172a;
    --brand-ink: #ffffff;
    --accent: #f97316;
    --radius: 16px;
    --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ink: #0b1220;
    --ink-muted: #64748b;
    --line: #e2e8f0;
    --surface-alt: #f1f5f9;
}

h1, h2 { font-weight: 800; letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 1.2rem + 3vw, 3.2rem); }

.site-header { background: var(--brand); border-bottom: 0; }
.site-header a, .site-header .brand { color: var(--brand-ink); }
.brand-mark { background: var(--accent); }
.nav a:hover { color: var(--accent); }
.site-header .btn { background: var(--accent); border-color: var(--accent); }

.hero {
    background: linear-gradient(160deg, var(--brand), color-mix(in srgb, var(--brand) 65%, var(--accent)));
    color: var(--brand-ink); border-bottom: 0; padding-block: 4rem;
}
.hero .hero-sub, .hero .hero-stats, .hero .muted { color: color-mix(in srgb, var(--brand-ink) 78%, transparent); }
.hero .btn { background: var(--accent); border-color: var(--accent); }

.btn { border-radius: 999px; }

.card { border: 0; box-shadow: 0 2px 14px rgb(15 23 42 / .09); }
.card:hover { box-shadow: 0 8px 26px rgb(15 23 42 / .16); transform: translateY(-2px); transition: all .15s ease; }
.card-media { aspect-ratio: 4 / 3; }
.card-price {
    font-size: 1.45rem; font-weight: 800; color: var(--ink);
}
.badge-brand { background: var(--accent); }

.listing-price .price { font-size: 2.2rem; font-weight: 800; color: var(--ink); }
.sidebar, .listing-aside, .mortgage, .testimonial { border: 0; box-shadow: 0 2px 14px rgb(15 23 42 / .07); background: var(--surface); }
.facet-link.is-active { background: var(--accent); color: #fff; }
.map-pin { background: var(--accent); }

@media (prefers-reduced-motion: reduce) {
    .card:hover { transform: none; }
}