/* =============================================================
   RDM Real Estate — Design Tokens
   Colors, Typography, Spacing, Radii, Motion
   ============================================================= */

/* ---------- Webfonts ----------
   The brand uses a clean, restrained sans-serif with a strong
   capital-heavy display feel (see logo). We use Inter as the
   body face and a slightly tighter tracking on display weights.
   If the brand has a specific wordmark font (e.g. a custom
   geometric sans), please provide the file and we'll swap.
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');

:root {
  /* ---------- BRAND COLORS (from palette reference) ---------- */
  --rdm-stone:      #EAE6E3;  /* primary warm neutral — backgrounds */
  --rdm-silver:     #C1C1C1;  /* cool neutral — dividers, inactive */
  --rdm-taupe:      #989187;  /* warm mid tone — supporting surfaces */
  --rdm-gold:       #A18456;  /* brand accent — considered, sparing */
  --rdm-black:      #000000;  /* logo + primary text */

  /* Brief-specified extensions */
  --rdm-charcoal:   #000000;  /* pure black — body text, dark surfaces (token name kept for refactor convenience) */
  --rdm-bronze:     #8C7355;  /* warm accent — never next to gold (similar warm tones) */

  /* Derived tints (for hover, subtle fills) */
  --rdm-stone-50:   #F5F3F1;
  --rdm-stone-100:  #EAE6E3;
  --rdm-stone-200:  #DCD6D1;
  --rdm-taupe-100:  #B8B2A9;
  --rdm-taupe-700:  #6E6A63;
  --rdm-gold-100:   #D4C19D;
  --rdm-gold-700:   #7B6540;

  /* ---------- SEMANTIC COLORS ---------- */
  --bg:             #FFFFFF;              /* page background — crisp white */
  --bg-soft:        var(--rdm-stone-50);  /* alternate section bg */
  --bg-stone:       var(--rdm-stone);     /* warm tonal panel */
  --bg-dark:        var(--rdm-charcoal);  /* inverted sections */

  --fg:             var(--rdm-charcoal);  /* primary text */
  --fg-muted:       var(--rdm-taupe-700); /* secondary text */
  --fg-subtle:      var(--rdm-taupe);     /* tertiary, captions */
  --fg-inverse:     #FFFFFF;              /* text on dark surfaces */

  --line:           var(--rdm-stone-200); /* hairline dividers */
  --line-strong:    var(--rdm-taupe);     /* emphasised dividers */

  --accent:         var(--rdm-gold);      /* lone brand accent */
  --accent-hover:   var(--rdm-gold-700);
  --accent-soft:    var(--rdm-gold-100);

  /* ---------- TYPE FAMILIES ---------- */
  --font-sans:      'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-display:   'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:      ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- TYPE SCALE ----------
     Restrained — never more than 3 weights visible together.
     Italics are used for subheadings / editorial callouts.
  */
  --text-xs:    12px;   /* micro: meta, eyebrow uppercase */
  --text-sm:    14px;   /* captions, labels */
  --text-base: 16px;   /* body */
  --text-md:   18px;   /* comfortable body, list items */
  --text-lg:   22px;   /* subheads */
  --text-xl:   28px;   /* section titles */
  --text-2xl:  40px;   /* page titles */
  --text-3xl:  56px;   /* hero */
  --text-4xl:  80px;   /* display, listing hero */

  --lh-tight:   1.08;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-loose:   1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;   /* for uppercase eyebrows & caps */
  --tracking-wider:  0.18em;   /* logo-style REAL ESTATE caps */

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---------- SPACING (8pt soft grid) ---------- */
  --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 ----------
     Very restrained. No soft, friendly corners — this is a
     boutique agency, not a consumer app. Max radius = 4px.
  */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-pill: 999px;   /* used sparingly, only for tags */

  /* ---------- BORDERS ---------- */
  --border-hair:   1px solid var(--line);
  --border-strong: 1px solid var(--fg);

  /* ---------- ELEVATION ----------
     No drop shadows per brief. Depth is communicated with
     hairline borders and subtle background shifts only.
  */
  --elev-none:  none;
  --elev-inset: inset 0 0 0 1px var(--line);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    220ms;
  --dur-slow:    400ms;

  /* ---------- LAYOUT ---------- */
  --container:     1280px;
  --container-sm:   960px;
  --gutter:        var(--space-6);
}

/* =============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================= */

html, body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- HEADINGS ---------- */
.h-display, h1.display {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}

h2, .h2 {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

h3, .h3 {
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  margin: 0;
}

h4, .h4 {
  font-size: var(--text-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  margin: 0;
}

/* Italic subheading — editorial, brief-mandated usage */
.subhead {
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--text-lg);
  color: var(--fg-muted);
  line-height: var(--lh-snug);
}

/* Eyebrow — tracked uppercase, echoing "REAL ESTATE" in logo */
.eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-muted);
}

p, .p {
  font-size: var(--text-base);
  line-height: var(--lh-loose);
  color: var(--fg);
  margin: 0;
  text-wrap: pretty;
  max-width: 68ch;
}

.p-lead {
  font-size: var(--text-md);
  line-height: var(--lh-loose);
  color: var(--fg);
}

.caption {
  font-size: var(--text-sm);
  color: var(--fg-muted);
  line-height: var(--lh-normal);
}

.meta {
  font-size: var(--text-xs);
  color: var(--fg-subtle);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--fg);
  background: var(--rdm-stone-50);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

/* Horizontal rule — hairline only */
hr, .rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--space-6) 0;
}