/* ─────────────────────────────────────────────
   MySpace NYC — RealtyHunter 2.0 Design Tokens
   Two token sets coexist in the codebase:

   [1] EDITORIAL (the declared brand, newer work)
       Cormorant Garamond + Montserrat, cream bg,
       muted gold, hairline borders. Used in: search,
       dashboard, signup, newer screens. This is
       the direction going forward.

   [2] LEGACY PORTAL (shared.css, older work)
       Poppins + dark navy + bright gold. Used in:
       shared nav, login gate, admin, agent, most
       back-office tooling. Still in production; do
       not delete.
   ───────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    /* ── [1] EDITORIAL — brand-forward ── */
    --ed-bg: #f5f0e8; /* cream page */
    --ed-surface: #ffffff; /* cards, panels */
    --ed-surface-2: #faf7f2; /* subtle panels, pill bg */
    --ed-ink: #1a1a1a; /* primary text, CTAs */
    --ed-muted: #aaaaaa; /* secondary text */
    --ed-muted-2: #888888; /* tertiary */
    --ed-border: rgba(0, 0, 0, 0.1);
    --ed-border-soft: rgba(0, 0, 0, 0.04);

    --ed-gold: #a08830; /* muted gold — primary accent */
    --ed-gold-dark: #8a7628; /* hover / pressed */
    --ed-gold-deep: #8a7628; /* text on cream (4.5:1) */
    --ed-gold-soft: rgba(160, 136, 48, 0.35);
    --ed-gold-tint: rgba(160, 136, 48, 0.1);
    --ed-gold-wash: rgba(160, 136, 48, 0.05);

    /* ── BRAND FAMILY — editorial palette, used together ──
     Five accents on two neutrals. Tuned to sit on cream
     without clashing. Roles suggestive, not exclusive.   */

    /* Claude coral — warm cream-orange · featured · renter CTA */
    --ed-claude: #d97757;
    --ed-claude-dark: #b85a3d;
    --ed-claude-tint: rgba(217, 119, 87, 0.12);
    --ed-claude-wash: rgba(217, 119, 87, 0.05);

    /* Maroon — rose-brick · alert · hot lead · action required */
    --ed-maroon: #944347;
    --ed-maroon-dark: #7a3538;
    --ed-maroon-tint: rgba(148, 67, 71, 0.12);
    --ed-maroon-wash: rgba(148, 67, 71, 0.05);

    /* Dark olive — earthy · agent · pairs with gold            */
    --ed-olive: #8f7e32;
    --ed-olive-dark: #6b5e1f;
    --ed-olive-tint: rgba(143, 126, 50, 0.14);

    /* Light olive — sage/straw, between dark olive and cream   */
    --ed-olive-light: #c9b770;
    --ed-olive-light-tint: rgba(201, 183, 112, 0.18);
    --ed-olive-light-wash: rgba(201, 183, 112, 0.08);

    /* Slate — cool blue-gray · landlord · quiet secondary      */
    --ed-slate: #506060;
    --ed-slate-dark: #3a4848;
    --ed-slate-tint: rgba(80, 96, 96, 0.12);

    /* Forest — deep green · verified · positive CTA            */
    --ed-forest: #3d5a3d;
    --ed-forest-dark: #2c4229;
    --ed-forest-tint: rgba(61, 90, 61, 0.12);

    /* NEUTRALS */
    --ed-cream: #f5f0e8; /* page cream — same as --ed-bg */
    --ed-cream-tan: #e0d0b0; /* warmer tan — stationery, saved states */
    --ed-off-white: #faf7f2; /* panel off-white — subtle layering */
    --ed-cream-dark: #c8b896;

    /* Legacy aliases (terracotta now points at claude, teal at slate) */
    --ed-terracotta: var(--ed-claude);
    --ed-terracotta-dark: var(--ed-claude-dark);
    --ed-terracotta-tint: var(--ed-claude-tint);
    --ed-teal: var(--ed-slate);
    --ed-teal-dark: var(--ed-slate-dark);
    --ed-teal-tint: var(--ed-slate-tint);

    /* semantic — editorial */
    --ed-green: #22c55e;
    --ed-green-tint: rgba(34, 197, 94, 0.1);
    --ed-green-ink: #166534;
    --ed-blue: #3b82f6;
    --ed-blue-tint: rgba(59, 130, 246, 0.1);
    --ed-blue-ink: #1e40af;
    --ed-amber: #f59e0b;
    --ed-amber-tint: rgba(245, 158, 11, 0.12);
    --ed-amber-ink: #92400e;
    --ed-red: #ef4444;
    --ed-red-tint: rgba(185, 28, 28, 0.1);
    --ed-red-ink: #991b1b;

    /* ── [2] LEGACY PORTAL — shared.css ── */
    --lg-dark: #1a1a2e; /* nav bg */
    --lg-dark-2: #16213e;
    --lg-mid: #0f3460; /* gradient pair w/ dark */
    --lg-light: #f4f6f9; /* page bg */
    --lg-text: #333333;
    --lg-muted: #666666;
    --lg-white: #ffffff;

    --lg-gold: #f9b016; /* bright gold — CTA */
    --lg-gold-dark: #d9940f;

    --lg-green: #22c55e;
    --lg-red: #ef4444;
    --lg-blue: #3b82f6;

    /* ── TYPE ── */
    --font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-body: 'Montserrat', -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --font-legacy: 'Poppins', -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

    /* editorial type scale */
    --fs-display: 2rem; /* 32 — hero */
    --fs-h1: 1.85rem; /* 30 — kpi values */
    --fs-h2: 1.4rem; /* 22 */
    --fs-h3: 1.1rem; /* 18 */
    --fs-h4: 1rem; /* 16 */
    --fs-body: 0.9rem; /* 14.4 */
    --fs-small: 0.82rem; /* 13 */
    --fs-xs: 0.75rem; /* 12 */
    --fs-micro: 0.68rem; /* 11 — labels, uppercase */

    --lh-tight: 1.1;
    --lh-normal: 1.5;
    --lh-body: 1.7;

    --ls-tight: -0.01em;
    --ls-normal: 0;
    --ls-wide: 0.04em;
    --ls-label: 0.06em; /* uppercase eyebrow labels */

    /* ── SPACING (4px base) ── */
    --sp-1: 0.25rem; /* 4 */
    --sp-2: 0.5rem; /* 8 */
    --sp-3: 0.75rem; /* 12 */
    --sp-4: 1rem; /* 16 */
    --sp-5: 1.25rem; /* 20 */
    --sp-6: 1.5rem; /* 24 */
    --sp-8: 2rem; /* 32 */
    --sp-10: 2.5rem; /* 40 */

    /* ── RADIUS ── */
    --r-sharp: 2px; /* editorial — near-square */
    --r-sm: 4px;
    --r-md: 8px; /* legacy buttons */
    --r-lg: 10px; /* legacy cards */
    --r-xl: 16px; /* login box */
    --r-pill: 999px;

    /* ── SHADOWS ── */
    --sh-hairline: 0 0 0 0.5px rgba(0, 0, 0, 0.1); /* editorial border stand-in */
    --sh-card: 0 4px 20px rgba(0, 0, 0, 0.08); /* legacy card */
    --sh-hover: 0 8px 30px rgba(0, 0, 0, 0.1); /* hover lift */
    --sh-focus: 0 2px 12px rgba(0, 0, 0, 0.04); /* input focus shadow (editorial) */
    --sh-modal: 0 20px 60px rgba(0, 0, 0, 0.3); /* login box, modal */

    /* ── TRANSITIONS ── */
    --t-fast: 0.15s ease;
    --t-base: 0.2s ease;
}

/* ─── SEMANTIC ROLES (editorial, default) ─── */
:root {
    --bg: var(--ed-bg);
    --surface: var(--ed-surface);
    --surface-2: var(--ed-surface-2);
    --fg: var(--ed-ink);
    --fg-muted: var(--ed-muted);
    --border: var(--ed-border);
    --accent: var(--ed-gold);
    --accent-dark: var(--ed-gold-dark);
}

/* ─── BASE ELEMENT STYLES ─── */
body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: var(--lh-normal);
    color: var(--fg);
    background: var(--bg);
}

h1,
.h1 {
    font-family: var(--font-heading);
    font-size: var(--fs-display);
    font-weight: 500;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--fg);
}
h1 em,
.h1 em {
    color: var(--ed-gold-deep);
    font-style: italic;
    font-weight: 500;
}

h2,
.h2 {
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: var(--ls-tight);
}

h3,
.h3 {
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: 1.25;
}

h4,
.h4 {
    font-family: var(--font-body);
    font-size: var(--fs-h4);
    font-weight: 600;
}

p,
.p {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: #555;
    font-weight: 300;
}

small,
.small,
.sub {
    font-size: var(--fs-small);
    color: var(--fg-muted);
    font-weight: 300;
}

.eyebrow,
.label {
    font-size: var(--fs-micro);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    color: var(--fg-muted);
}

.num,
.money,
.tabular {
    font-variant-numeric: tabular-nums;
}

/* ─── KPI VALUE (serif numeric — signature of editorial dashboard) ─── */
.serif-num {
    font-family: var(--font-heading);
    font-size: var(--fs-h1);
    font-weight: 600;
    line-height: var(--lh-tight);
    font-variant-numeric: tabular-nums;
    color: var(--fg);
}