/* ────────────────────────────────────────────────────────────
   THEME.CSS — Live Real Estate / PropDeck shared design tokens
   Load this on every page: <link rel="stylesheet" href="/css/theme.css">

   This is the single source of truth for colors, type, radius,
   and shadow. Individual pages should reference these variables
   instead of hard-coding hex values or font stacks locally —
   that's the fragmentation this file exists to fix.

   Values confirmed against the real liverealestate.co.za brand
   (navy nav bar, tan/copper accent, Poppins display + Inter body).
──────────────────────────────────────────────────────────── */

:root {
    /* Brand */
    --lre-navy: #15233a;
    --lre-navy-light: #253a5c;
    --lre-tan: #b08968;
    --lre-tan-dark: #96714f;
    --lre-tan-tint: #f2e9e1;

    /* Surfaces */
    --surface-page: #faf9f7;
    --surface-card: #ffffff;
    --border: #ece7e0;
    --border-strong: #ddd4c7;

    /* Text */
    --text-primary: #23262b;
    --text-secondary: #5c6068;
    --text-muted: #8b8f96;

    /* Shape */
    --radius-sm: 8px;
    --radius-md: 12px;
    --shadow-sm: 0 1px 2px rgba(21, 35, 58, 0.08);
    --shadow-md: 0 4px 16px rgba(21, 35, 58, 0.10);

    /* Type */
    --font-display: 'Poppins', sans-serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Reset + base ──
   Replaces the per-page "* { margin:0; padding:0; box-sizing:border-box; }"
   and the hard-coded Arial/Segoe UI body font found across the old pages. */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-sans);
    background: var(--surface-page);
    color: var(--text-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ── Generic building blocks available to any page ──
   Page-specific layouts (card grids, tables, forms) stay defined
   in that page's own <style> block — only truly cross-page
   primitives belong here. */

.lre-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: var(--lre-tan);
    color: white;
    border: none;
    padding: 0.6rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease;
}
.lre-btn:hover { background: var(--lre-tan-dark); }

.lre-btn.secondary { background: var(--lre-navy); }
.lre-btn.secondary:hover { background: var(--lre-navy-light); }

/* ── Shared button family (glossy bevel) ──
   Single source of truth for .btn styling across all pages.
   Pages must NOT redefine these locally. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1.15rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45),
                inset 0 -2px 3px rgba(0, 0, 0, 0.15),
                0 2px 5px rgba(21, 35, 58, 0.30);
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.15s ease;
}
.btn:hover { filter: brightness(1.08); }
.btn:active {
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
    transform: translateY(1px);
}
.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: none;
    transform: none;
}

.btn-primary {
    background: linear-gradient(180deg, #3a5078 0%, #253a5c 48%, #15233a 52%, #0e1a2d 100%);
    border-color: #0b1424;
}
.btn-secondary {
    background: linear-gradient(180deg, #93a1af 0%, #77828d 48%, #64707c 52%, #57626d 100%);
    border-color: #4a545e;
}
.btn-success {
    background: linear-gradient(180deg, #34d399 0%, #10b981 48%, #059669 52%, #047857 100%);
    border-color: #065f46;
}
.btn-danger {
    background: linear-gradient(180deg, #f87171 0%, #ef4444 48%, #dc2626 52%, #b91c1c 100%);
    border-color: #991b1b;
}
.btn-warning {
    background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 48%, #d97706 52%, #b45309 100%);
    border-color: #92400e;
}

.lre-card {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.lre-badge {
    display: inline-block;
    background: var(--lre-tan-tint);
    color: var(--lre-tan-dark);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
}