/* ============================================================
   My Property Partner — Brand Kit
   Shared tokens + base components for every page template.
   Link this in every future page: <link rel="stylesheet" href="/assets/style.css">
   ============================================================ */

:root {
    /* Color */
    --maroon: #6B1E23;
    --maroon-dark: #4A1418;
    --maroon-darker: #330F12;
    --ochre: #C98A3B;
    --teal: #1F4E4A;
    --teal-dark: #163E3B;
    --limestone: #F4EFE4;
    --limestone-warm: #ECE2CC;
    --ink: #241F1B;
    --ink-soft: #55504A;
    --white: #FFFDF9;

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-pill: 999px;

    /* Shadow */
    --shadow-sm: 0 2px 8px rgba(107,30,35,0.08);
    --shadow-md: 0 12px 24px rgba(107,30,35,0.10);
    --shadow-lg: 0 20px 50px rgba(0,0,0,0.28);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    color: var(--ink);
    background: var(--limestone);
    line-height: 1.55;
}
h1, h2, h3 { font-family: 'Fraunces', serif; font-weight: 600; margin: 0 0 0.4em; line-height: 1.15; }
a { color: inherit; }
.mono { font-family: 'IBM Plex Mono', monospace; }
:focus-visible { outline: 3px solid var(--ochre); outline-offset: 2px; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: var(--radius-pill);
    font-weight: 600; font-size: 0.88rem; text-decoration: none; border: 1.5px solid transparent;
    white-space: nowrap; cursor: pointer; transition: background 0.15s, transform 0.15s;
}
.btn-call { background: var(--maroon); color: var(--white); }
.btn-call:hover { background: var(--maroon-dark); }
.btn-whatsapp { background: var(--teal); color: var(--white); }
.btn-whatsapp:hover { background: var(--teal-dark); }
.btn-outline { background: transparent; border-color: var(--maroon); color: var(--maroon); }
.btn-outline:hover { background: rgba(107,30,35,0.06); }
.btn-lg { padding: 14px 26px; font-size: 0.98rem; }

/* ---------- Cards ---------- */
.card {
    background: var(--white); border: 1px solid rgba(107,30,35,0.12); border-radius: var(--radius-md);
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.card:hover { border-color: var(--ochre); transform: translateY(-2px); box-shadow: var(--shadow-md); }

.property-card { overflow: hidden; }
.property-card .thumb {
    height: 150px; background: linear-gradient(135deg, var(--limestone-warm), #E2D6BC);
    display: flex; align-items: center; justify-content: center;
}

/* ---------- Forms ---------- */
.field-label { font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); display: block; margin-bottom: 4px; }
input, select, textarea {
    width: 100%; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid rgba(107,30,35,0.22);
    font-family: inherit; font-size: 0.92rem; background: var(--limestone);
}

/* ---------- Badges & trust signals ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 700; }
.badge-verified { background: rgba(31,78,74,0.12); color: var(--teal); }
.badge-published { background: rgba(31,78,74,0.12); color: var(--teal); }
.badge-pending { background: rgba(201,138,59,0.15); color: var(--ochre); }
.badge-sold, .badge-rented, .badge-archived { background: rgba(85,80,74,0.12); color: var(--ink-soft); }

.trust-line { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--ink-soft); }
.trust-line svg { flex-shrink: 0; }

/* ---------- Section shells (for future page templates) ---------- */
section { padding: 68px 24px; }
.section-inner { max-width: 1200px; margin: 0 auto; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 42px; }
.eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ochre); }
.section-head h2 { font-size: clamp(1.5rem, 3vw, 2.15rem); color: var(--maroon-dark); }
.section-head p { color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }