/* Breckenridge Costa Rica — design tokens
 * Restrained editorial finance branding.
 * Reference: 20(SOMETHING) × McKinsey Quarterly × Brunello Cucinelli.
 * Bone is the default page surface. Never pure white.
 */

@import url("https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;1,400;1,500&family=IBM+Plex+Sans:wght@400;500;600&display=swap");

:root {
  /* ---- Color ---- */
  --bone:         #F4EFE7; /* primary surface */
  --cream-light:  #FAF6EE; /* elevated surfaces, cards */
  --forest-navy:  #1D2D44; /* headlines, brand color (TYPE ONLY, not large surfaces) */
  --charcoal:     #1A1A1A; /* body text on bone */
  --stone-gray:   #6B6B65; /* secondary text, captions, hairlines */
  --tabaco:       #A0522D; /* editorial accent. max 2–3 appearances per section */
  --sage-muted:   #8E9B85; /* very rare divider/accent. easter egg */

  /* Semantic aliases */
  --bg:           var(--bone);
  --bg-elevated:  var(--cream-light);
  --fg-display:   var(--forest-navy);
  --fg-body:      var(--charcoal);
  --fg-muted:     var(--stone-gray);
  --accent:       var(--tabaco);
  --hairline:     rgba(107, 107, 101, 0.45); /* 0.5px stone-gray for dividers */

  /* ---- Type ---- */
  --font-display: "Spectral", "Spectral Fallback", Georgia, "Times New Roman", serif;
  --font-body:    "IBM Plex Sans", "IBM Plex Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Sizes (desktop) */
  --fs-hero:      clamp(56px, 7.5vw, 96px);
  --fs-h2:        clamp(40px, 4.4vw, 56px);
  --fs-h3:        clamp(24px, 2.4vw, 32px);
  --fs-stat:      clamp(56px, 6.5vw, 96px);
  --fs-body:      17px;
  --fs-caption:   14px;
  --fs-eyebrow:   13px;

  --lh-display:   1.05;
  --lh-h2:        1.1;
  --lh-h3:        1.2;
  --lh-body:      1.6;
  --lh-caption:   1.5;

  --tracking-eyebrow: 0.12em;
  --tracking-tight:   -0.01em;

  /* ---- Layout ---- */
  --container-max: 1280px;
  --gutter:        clamp(24px, 5vw, 64px);

  /* ---- Spacing scale (8pt) ---- */
  --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;

  /* ---- Motion ---- */
  --ease-quiet:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-tap:      200ms;
  --dur-hover:    400ms;
  --dur-reveal:   700ms;

  /* ---- Borders (always hairline) ---- */
  --border-hair:  0.5px solid var(--hairline);
}

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

/* ---- Semantic typography ---- */
.hero-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-hero);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-display);
  text-wrap: balance;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-display);
  text-wrap: balance;
}
.h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--fg-display);
}
.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-body);
  text-wrap: pretty;
}
.caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--fg-muted);
}
.stat {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-stat);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--fg-display);
  letter-spacing: -0.02em;
}
.italic-emphasis {
  font-style: italic;
}

/* ---- Image treatment ----
 * Warm overlay: tabaco at 8–12% multiply.
 * Wrap <img> in .img-warm or apply directly via ::after on a positioned parent.
 */
.img-warm {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Hairline frame: contains the photo as an intentional editorial edge
     instead of a rectangle pasted onto the bone surface. */
  border: 0.5px solid var(--hairline);
}
.img-warm > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-hover) var(--ease-quiet);
}
.img-warm::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tabaco);
  mix-blend-mode: multiply;
  opacity: 0.10; /* 8–12% */
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .img-warm:hover > img { transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .img-warm > img { transition: none; }
  .img-warm:hover > img { transform: none; }
}

/* ---- Button (single primary form) ---- */
.btn {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--forest-navy);
  border: none;
  padding: 16px 28px;
  cursor: pointer;
  transition: filter var(--dur-tap) var(--ease-quiet);
  text-decoration: none;
  display: inline-block;
}
.btn:hover { filter: brightness(1.18); }

.btn-ghost {
  background: transparent;
  color: var(--forest-navy);
  border-bottom: 0.5px solid var(--forest-navy);
  padding: 6px 0;
  text-transform: uppercase;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  cursor: pointer;
  transition: opacity var(--dur-tap) var(--ease-quiet);
}
.btn-ghost:hover { opacity: 0.6; }

/* ---- Hairline ---- */
.hairline {
  height: 0.5px;
  width: 100%;
  background: var(--hairline);
  border: 0;
}