/* ============================================================
   Divergent Estates — Colors & Type
   Warm, earthy, editorial. Hospitality × property management.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---- Core neutrals (cream → ink) ---------------------- */
  --cream-50:  #FBF8F2;   /* page background, softest */
  --cream-100: #F5EFE3;   /* card surface, warm bg */
  --cream-200: #EBE3D2;   /* hairline dividers, quiet rows */
  --sand-300:  #D9CDB4;   /* muted borders */
  --stone-400: #A89982;   /* secondary text on cream */
  --stone-500: #7A6B55;   /* tertiary text, metadata */
  --clay-700:  #4A3F30;   /* primary body text on cream */
  --ink-900:   #1C1A17;   /* near-black; logo ink */
  --black:     #000000;   /* true black; used for the mark */
  --white:     #FFFFFF;

  /* ---- Earth accents — Terracotta is the primary, per brand kit V1.0 */
  /* Primary accent is a true warm terracotta — orange-rust, not brown. */
  --terracotta-100: #F3DFD2;   /* tint / badge bg */
  --terracotta-500: #B85C3C;   /* PRIMARY accent, CTAs */
  --terracotta-600: #9A4A2E;   /* hover / pressed */
  --rust-700:       #7A3521;   /* deep accent */
  /* Bronze tokens kept as legacy aliases mapping to terracotta — */
  /* any component still referencing --bronze-* now renders correct brand color. */
  --bronze-100:     #F3DFD2;
  --bronze-500:     #B85C3C;
  --bronze-600:     #9A4A2E;
  --ochre-500:      #C78A3D;   /* secondary accent, highlights */
  --ochre-100:      #F6E6C6;
  --moss-600:       #5E6B3A;   /* success / "booked" */
  --moss-100:       #E3E6D3;
  --sage-500:       #8A9973;
  --espresso-700:   #4A2F1A;   /* deep imagery anchor */
  --rose-300:       #E4B9A4;   /* soft imagery tint */

  /* ---- Semantic surface tokens -------------------------- */
  --bg:              var(--cream-50);
  --bg-elevated:     var(--white);
  --bg-muted:        var(--cream-100);
  --bg-sunken:       var(--cream-200);
  --bg-inverse:      var(--ink-900);

  --fg:              var(--clay-700);
  --fg-strong:       var(--ink-900);
  --fg-muted:        var(--stone-500);
  --fg-subtle:       var(--stone-400);
  --fg-inverse:      var(--cream-50);

  --accent:          var(--terracotta-500);
  --accent-hover:    var(--terracotta-600);
  --accent-soft:     var(--terracotta-100);
  --accent-fg:       var(--white);

  --success:         var(--moss-600);
  --success-soft:    var(--moss-100);
  --warning:         var(--ochre-500);
  --warning-soft:    var(--ochre-100);
  --danger:          var(--rust-700);

  --border:          var(--sand-300);
  --border-strong:   var(--stone-400);
  --border-subtle:   var(--cream-200);

  /* ---- Type families ----------------------------------- */
  --font-wordmark: 'Bebas Neue', 'Oswald', 'Impact', sans-serif;  /* The logo wordmark face */
  --font-display:  'Fraunces', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-micro:    'Inter', sans-serif;  /* ALL CAPS tracked-out labels */

  /* ---- Type scale -------------------------------------- */
  /* Display uses Fraunces with optical sizing. Body is Inter. */
  --fs-display-1: clamp(3.5rem, 6vw, 5.5rem);    /* 56–88px */
  --fs-display-2: clamp(2.75rem, 4.5vw, 4rem);   /* 44–64px */
  --fs-h1:        2.5rem;     /* 40px */
  --fs-h2:        2rem;       /* 32px */
  --fs-h3:        1.5rem;     /* 24px */
  --fs-h4:        1.25rem;    /* 20px */
  --fs-body:      1rem;       /* 16px */
  --fs-body-lg:   1.125rem;   /* 18px */
  --fs-small:     0.875rem;   /* 14px */
  --fs-micro:     0.75rem;    /* 12px */

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.08em;
  --tracking-micro:   0.16em;   /* for uppercase labels */

  /* ---- Spacing scale (8px base, with 4px half-steps) ---- */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4  */
  --space-2:  0.5rem;    /* 8  */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  3rem;      /* 48 */
  --space-8:  4rem;      /* 64 */
  --space-9:  6rem;      /* 96 */
  --space-10: 8rem;      /* 128 */

  /* ---- Radii ------------------------------------------ */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   22px;
  --radius-full: 999px;

  /* ---- Shadows (warm, soft — never gray/blue) ---------- */
  --shadow-xs:  0 1px 2px rgba(74, 63, 48, 0.06);
  --shadow-sm:  0 2px 6px rgba(74, 63, 48, 0.08);
  --shadow-md:  0 6px 18px rgba(74, 63, 48, 0.10), 0 1px 2px rgba(74, 63, 48, 0.06);
  --shadow-lg:  0 18px 40px rgba(74, 63, 48, 0.14), 0 2px 6px rgba(74, 63, 48, 0.06);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ---- Motion ---------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;

  /* ---- Layout ---------------------------------------- */
  --container-sm:  640px;
  --container-md:  880px;
  --container-lg:  1180px;
  --container-xl:  1400px;
}

/* ============================================================
   Semantic element styles
   ============================================================ */

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

.display-1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
  font-variation-settings: "opsz" 144;
  text-wrap: balance;
}

.display-2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
  font-variation-settings: "opsz" 144;
  text-wrap: balance;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
  font-variation-settings: "opsz" 80;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-strong);
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg-strong);
}

p, .body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg);
  text-wrap: pretty;
}

.body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
}

.small {
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
}

/* Editorial italic — pull-quotes, taglines, "Estates" in lockup */
.italic-display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}

/* Tracked-out uppercase micro-label — the "stamp" */
.eyebrow, .label-caps {
  font-family: var(--font-micro);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--fg-muted);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-sunken);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--clay-700);
}

a {
  color: var(--clay-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--sand-300);
  transition: text-decoration-color var(--dur-fast) var(--ease-standard);
}
a:hover { text-decoration-color: var(--terracotta-500); }

hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-6) 0;
}

::selection {
  background: var(--terracotta-100);
  color: var(--rust-700);
}