/* ─────────────────────────────────────────────
   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.10);
  --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.10);
  --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.10);
  --ed-green-ink:  #166534;
  --ed-blue:    #3b82f6;
  --ed-blue-tint:  rgba(59,130,246,0.10);
  --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.10);
  --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.10);      /* 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.10);       /* 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.30);      /* 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);
}