/* ─────────────────────────────────────────────────────────────────────────
   Tahoe Signature Properties — Design System Layer
   Adapted from docs/design (React/JSX prototype) into reusable CSS primitives.
   This sits ALONGSIDE Tailwind utilities — Tailwind keeps doing layout/spacing,
   this file provides editorial typography + components.
   Loaded from includes/header.php.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* brand tokens — lifted from the homeowner brochure */
  --forest:    #0a1f35;
  --forest-2:  #102a44;
  --lake:      #006bad;
  --lake-2:    #5ab8ff;
  --sage:      #198d75;
  --mist:      #b8ddd5;
  --snow:      #faf8f5;
  --sand:      #e8ddd0;
  --warm:      #faf8f5;
  --bone:      #f1ede4;
  --charcoal:  #2c2c2a;
  --ink:       #1a1a1a;
  --muted:     #6b6b66;
  --hairline:  rgba(10,31,53,0.10);
  --gold:      #c9a86a;

  /* modern theme (default) */
  --bg:        var(--warm);
  --bg-2:      #ffffff;
  --bg-deep:   var(--forest);
  --fg:        var(--ink);
  --fg-2:      #4a4a46;
  --eyebrow:   var(--sage);
  --accent:    var(--lake);
  --rule:      var(--sage);

  --serif:     'Cormorant Garamond', Georgia, serif;
  --num:       'EB Garamond', 'Cormorant Garamond', Georgia, serif;
  --sans:      'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ─── Containers ─────────────────────────────────────────────────────── */
.tsp-container,
.tsp-container-wide {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
.tsp-container       { max-width: 1240px; }
.tsp-container-wide  { max-width: 1440px; }
@media (min-width: 640px) {
  .tsp-container,
  .tsp-container-wide { padding-left: 40px; padding-right: 40px; }
}

/* ─── Eyebrow label with inline rule ─────────────────────────────────── */
.eyebrow {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--eyebrow);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--rule);
}
.eyebrow.bare::before { display: none; }
.eyebrow-center { justify-content: center; }
.eyebrow-light { color: rgba(255,255,255,0.82); }
.eyebrow-light::before { background: rgba(255,255,255,0.5); }
.eyebrow-gold { color: var(--gold); }
.eyebrow-gold::before { background: var(--gold); }

/* ─── Display headings ───────────────────────────────────────────────── */
.display {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.display em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}
.display.h1 { font-size: clamp(48px, 6.4vw, 92px); }
.display.h2 { font-size: clamp(38px, 4.6vw, 64px); }
.display.h3 { font-size: clamp(26px, 2.6vw, 36px); }

/* ─── Body text ──────────────────────────────────────────────────────── */
.lead {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  color: var(--fg-2);
  max-width: 56ch;
}
.body-copy {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.75;
  color: var(--fg-2);
  font-weight: 300;
}

/* ─── Rules ──────────────────────────────────────────────────────────── */
.rule {
  width: 48px;
  height: 1px;
  background: var(--rule);
  display: block;
}
.rule-center { margin-left: auto; margin-right: auto; }

/* ─── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 16px 28px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  line-height: 1;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-primary:hover {
  background: transparent;
  color: var(--accent);
}
.btn-ghost {
  border-color: currentColor;
  opacity: 0.85;
}
.btn-ghost:hover {
  opacity: 1;
  background: rgba(255,255,255,0.06);
}
.btn-link {
  padding: 0 0 6px;
  border-bottom: 1px solid var(--accent);
  color: var(--accent);
}
.btn-link:hover { gap: 18px; }

.arrow {
  width: 14px;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: width 0.25s ease;
  display: inline-block;
}
.arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
}
.btn:hover .arrow { width: 22px; }

/* ─── Section spacing & head ─────────────────────────────────────────── */
.section-pad    { padding: clamp(80px, 9vw, 140px) 0; }
.section-pad-sm { padding: clamp(56px, 6vw, 88px) 0; }

.section-head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: end;
  margin-bottom: clamp(48px, 5vw, 80px);
}
.section-head .lead { max-width: 48ch; }
@media (max-width: 900px) {
  .section-head { grid-template-columns: 1fr; gap: 32px; }
}

/* ─── Themed backgrounds ─────────────────────────────────────────────── */
.bg-warm { background: var(--bg); }
.bg-snow { background: var(--bg-2); }
.bg-deep {
  background: var(--bg-deep);
  color: #fff;
}
.bg-deep .body-copy,
.bg-deep .lead { color: rgba(255,255,255,0.72); }
.bg-deep .display { color: #fff; }
.bg-deep .eyebrow:not(.eyebrow-gold) { color: rgba(255,255,255,0.82); }
.bg-deep .eyebrow:not(.eyebrow-gold)::before { background: rgba(255,255,255,0.5); }

/* ─── Placeholder image — gradient + monospace caption ───────────────── */
.img-placeholder {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(10,31,53,0.55) 0%, rgba(0,107,173,0.40) 50%, rgba(25,141,117,0.45) 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 12px, rgba(0,0,0,0.04) 12px 24px),
    linear-gradient(180deg, #2a4666 0%, #0a1f35 100%);
}
.img-placeholder::after {
  content: attr(data-label);
  position: absolute;
  left: 16px;
  bottom: 14px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}
.img-placeholder.tall  { aspect-ratio: 3/4; }
.img-placeholder.wide  { aspect-ratio: 16/10; }
.img-placeholder.sq    { aspect-ratio: 1/1; }

/* ─── Focus rings (accessibility) ────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ─── Reveal-on-scroll baseline ──────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}