/* =========================================================
   Deal Smith Realty — Colors & Type
   Modern real-estate solutions. Austin, TX.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Besley:ital,wght@0,400..900;1,400..900&family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* ---------- BRAND CORE ---------- */
  --dsr-black:        #0A0A0A;   /* primary surface — slightly softer than pure black */
  --dsr-ink:          #141414;   /* elevated surface on black */
  --dsr-graphite:     #1F1F1F;   /* card fill on dark */
  --dsr-smoke:        #2A2A2A;   /* divider on dark */

  --dsr-bone:         #F7F4EE;   /* warm paper — primary light surface */
  --dsr-linen:        #EFE9DE;   /* secondary light surface */
  --dsr-chalk:        #FFFFFF;   /* pure white — reserved */

  /* ---------- GOLD SCALE (metallic — polished to shadowed) ---------- */
  --gold-50:          #FFFBE8;   /* pearl highlight */
  --gold-100:         #FCEFAE;   /* bright sheen */
  --gold-200:         #F7DC6F;   /* polished gold */
  --gold-300:         #F0C93A;
  --gold-400:         #FFBB00;   /* brand primary — solid gold */
  --gold-500:         /* same hue, less lit */ #E0A600;
  --gold-600:         #B8870A;   /* gold in shade */
  --gold-700:         #8F6A10;   /* deep shadow gold, still chromatic */
  --gold-800:         #5E4708;
  --gold-900:         #2E2204;

  /* ---------- NEUTRAL (metallic-gold-leaning) ---------- */
  --neutral-50:       #F7F2E3;   /* lit champagne */
  --neutral-100:      #EDE4CB;
  --neutral-200:      #DCCFA8;   /* pale metallic */
  --neutral-300:      #C2B07E;
  --neutral-400:      #A08C58;   /* antique gold */
  --neutral-500:      #7C6A3E;
  --neutral-600:      #564928;
  --neutral-700:      #36301B;
  --neutral-800:      #1E1B10;
  --neutral-900:      #0D0B06;

  /* ---------- SEMANTIC (luxury-leaning) ---------- */
  --success:          #1F6B4A;   /* deep emerald — "Closed" */
  --warning:          #B88A2E;   /* antique champagne — "Pending" */
  --danger:           #7A1F28;   /* aged burgundy — "Expired" */
  --info:             #2B3F66;   /* muted sapphire — "New listing" */

  /* ---------- SEMANTIC FG/BG TOKENS ---------- */
  /* On light surfaces */
  --fg-1:             var(--dsr-black);      /* primary text */
  --fg-2:             var(--neutral-600);    /* secondary text */
  --fg-3:             var(--neutral-500);    /* tertiary / captions */
  --fg-muted:         var(--neutral-400);    /* disabled-ish */
  --fg-brand:         var(--gold-600);       /* hyperlinks + accents on light */

  --bg-1:             var(--dsr-bone);       /* page */
  --bg-2:             var(--dsr-linen);      /* elevated section */
  --bg-3:             var(--dsr-chalk);      /* card / raised */

  --border-1:         rgba(20,20,20,0.10);
  --border-2:         rgba(20,20,20,0.18);
  --border-strong:    rgba(20,20,20,0.85);   /* signature hairline */

  /* On dark surfaces */
  --fg-on-dark-1:     #F7F4EE;
  --fg-on-dark-2:     rgba(247,244,238,0.72);
  --fg-on-dark-3:     rgba(247,244,238,0.54);
  --border-on-dark:   rgba(247,244,238,0.14);
  --border-on-dark-2: rgba(247,244,238,0.28);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display:     'Besley', Georgia, serif;
  --font-sans:        'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:        'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Tracking */
  --tracking-tighter: -0.015em;
  --tracking-tight:   -0.005em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-widest:  0.07em;  /* for eyebrows / labels */

  /* ---------- SPACING (4pt base) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- RADII ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;   /* default card */
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-xs: 0 1px 2px rgba(10,10,10,0.04);
  --shadow-sm: 0 1px 3px rgba(10,10,10,0.06), 0 1px 2px rgba(10,10,10,0.04);
  --shadow-md: 0 6px 18px -6px rgba(10,10,10,0.10), 0 2px 6px rgba(10,10,10,0.05);
  --shadow-lg: 0 24px 48px -12px rgba(10,10,10,0.18), 0 8px 16px -8px rgba(10,10,10,0.08);
  --shadow-gold: 0 10px 30px -10px rgba(183,125,0,0.45);
  --shadow-inset-hairline: inset 0 0 0 1px rgba(20,20,20,0.08);

  /* ---------- MOTION ---------- */
  --ease-smooth:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;

  /* Page defaults */
  color-scheme: light;
  --text-color: var(--fg-1);
  --link-color: var(--gold-600);
}

/* =========================================================
   SEMANTIC TYPE STYLES
   ========================================================= */

.dsr-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-2);
}

.dsr-display-xxl {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, 6.8vw, 108px);
  line-height: 1.02;
  letter-spacing: var(--tracking-tighter);
  color: var(--fg-1);
}

.dsr-display-xl {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5.2vw, 76px);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.dsr-h1, h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}

.dsr-h2, h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.12;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}

.dsr-h3, h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin: 0;
}

.dsr-h4, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--fg-1);
  margin: 0;
}

.dsr-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--fg-2);
}

.dsr-body, p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-1);
}

.dsr-body-sm, small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-2);
}

.dsr-caption {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--fg-3);
}

.dsr-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-2);
}

.dsr-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0;
}

/* Gold accent on display type — signature motif (upright, weight-contrast) */
.dsr-accent-italic {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  color: var(--gold-600);
}

/* Base */
html, body { background: var(--bg-1); color: var(--fg-1); font-family: var(--font-sans); }
*, *::before, *::after { box-sizing: border-box; }
a { color: var(--link-color); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }