/*
 * Domos Finca El Mirador — Design Tokens
 * Import this file at the top of any HTML/JSX surface to inherit the brand.
 *
 *   <link rel="stylesheet" href="colors_and_type.css">
 *
 * All tokens are exposed both as CSS vars (--bg, --gold, etc) AND as
 * utility classes (.cinzel, .garamond, .gold-btn, .gold-rule, etc) so you
 * can prototype quickly without writing custom CSS.
 */

/* ── Fonts ────────────────────────────────────────────────────────────── */
/* Bebas Neue (display, condensed sans, all-caps) is the brand's display font.
   Self-hosted from fonts/. Cinzel kept as a fallback so existing markup still resolves.
   Lato (body, humanist sans) + DM Sans (sans meta) come from Google.
   Note: this body font was swapped from Cormorant Garamond → Lato per brand decision
   on 2026-05-21. See README § "Typography" for what that changes about the brand voice. */

@font-face {
  font-family: 'Bebas Neue';
  src: url('fonts/BebasNeue-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

:root {
  /* ── Color: surfaces ────────────────────────────────────────────────── */
  --bg:                #0A0A0E;   /* canvas / page background */
  --bg-soft:           #111117;   /* card, list row, sticky bar surface */
  --bg-glass:          rgba(10, 10, 14, 0.93);   /* sticky chrome */
  --bg-glass-deep:     rgba(10, 10, 14, 0.96);   /* tab bar */

  /* ── Color: gold (the only accent) ──────────────────────────────────── */
  --gold:              #C8A96E;   /* primary accent — borders, eyebrows, prices */
  --gold-dark:         #8B6914;   /* button gradient anchor */
  --gold-light:        #E5C97C;   /* button gradient hover apex */

  --gold-a07:          rgba(200, 169, 110, 0.07);
  --gold-a14:          rgba(200, 169, 110, 0.14);   /* resting border */
  --gold-a30:          rgba(200, 169, 110, 0.30);
  --gold-a50:          rgba(200, 169, 110, 0.50);   /* hover border */
  --gold-glow:         0 0 40px rgba(200, 169, 110, 0.10);
  --gold-rule:         linear-gradient(90deg, transparent, var(--gold), transparent);
  --gold-btn-grad:     linear-gradient(135deg, #8B6914 0%, #C8A96E 50%, #8B6914 100%);
  --gold-btn-hover:    linear-gradient(135deg, #A8841E 0%, #E5C97C 50%, #A8841E 100%);

  /* ── Color: foreground ──────────────────────────────────────────────── */
  --fg:                #F5EDD6;        /* headlines, primary cream text */
  --fg-soft:           rgba(245, 237, 214, 0.78);   /* body */
  --fg-muted:          rgba(245, 237, 214, 0.65);   /* meta, captions */
  --fg-faint:          rgba(245, 237, 214, 0.40);   /* legal, footnote */

  /* ── Color: semantic (only for review-platform badges) ──────────────── */
  --booking-bg:        rgba(0, 95, 200, 0.12);
  --booking-border:    rgba(0, 95, 200, 0.40);
  --booking-fg:        #8ABBE8;
  --tripadvisor-bg:    rgba(52, 168, 83, 0.12);
  --tripadvisor-border:rgba(52, 168, 83, 0.40);
  --tripadvisor-fg:    #8BCFA0;

  /* ── Type: families ─────────────────────────────────────────────────── */
  /* Bebas Neue is uppercase-only — lowercase glyphs render as small caps.
     Title-Case copy will read as ALL-CAPS visually. Plan around that. */
  --font-display:      'Bebas Neue', 'Cinzel', Impact, sans-serif;
  --font-body:         'Lato', 'Cormorant Garamond', system-ui, sans-serif;
  --font-meta:         'DM Sans', system-ui, sans-serif;

  /* ── Type: scale ────────────────────────────────────────────────────── */
  --fz-footnote:       10px;
  --fz-chip:           11px;
  --fz-eyebrow:        12px;
  --fz-meta:           12.5px;
  --fz-body-sm:        13.5px;
  --fz-body:           15px;
  --fz-body-lg:        17px;
  --fz-h3:             22px;
  --fz-price:          26px;
  --fz-h2:             clamp(1.75rem, 4vw, 2.4rem);

  /* ── Type: tracking ─────────────────────────────────────────────────── */
  /* Bebas Neue is already tightly condensed — trackings are dialled back
     from the old Cinzel values so the letters don't drift apart. */
  --tracking-eyebrow:  0.22em;
  --tracking-eyebrow-wide: 0.36em;
  --tracking-eyebrow-tight: 0.12em;
  --tracking-tabs:     0.10em;
  --tracking-footnote: 0.20em;

  /* ── Layout ─────────────────────────────────────────────────────────── */
  --max-w:             1100px;
  --pad-x:             24px;
  --header-h:          56px;
  --tabbar-h:          56px;
  --section-py:        80px;
  --grid-gap:          22px;

  /* ── Borders & radii ────────────────────────────────────────────────── */
  --hairline:          1px solid var(--gold-a14);
  --hairline-hover:    1px solid var(--gold-a50);
  --radius:            0;          /* the brand uses ZERO radius */
  --chamfer-sm:        polygon(5px 0%, 100% 0%, calc(100% - 5px) 100%, 0% 100%);
  --chamfer:           polygon(7px 0%, 100% 0%, calc(100% - 7px) 100%, 0% 100%);

  /* ── Shadows ────────────────────────────────────────────────────────── */
  --shadow-card-hover: 0 20px 55px rgba(0,0,0,0.65), 0 0 0 1px rgba(200,169,110,0.08);
  --shadow-rev-hover:  0 12px 40px rgba(0,0,0,0.50);
  --shadow-gold-btn:   0 4px 28px rgba(200,169,110,0.38);

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --ease:              cubic-bezier(0.4, 0, 0.2, 1);
  --dur-micro:         220ms;
  --dur-card:          400ms;
  --dur-slide:         600ms;

  /* ── Hero atmosphere ────────────────────────────────────────────────── */
  --hero-bg:
    radial-gradient(ellipse 100% 80% at 50% 0%, rgba(180,140,50,0.09) 0%, transparent 55%),
    radial-gradient(ellipse 60% 60% at 90% 30%, rgba(100,90,200,0.04) 0%, transparent 45%),
    var(--bg);
}

/* ── Reset (matches source) ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Semantic tags ───────────────────────────────────────────────────── */
h1 { font-family: var(--font-display); font-weight: 600; color: var(--fg); letter-spacing: 0; }
h2 { font-family: var(--font-display); font-weight: 600; color: var(--fg); font-size: var(--fz-h2); }
h3 { font-family: var(--font-display); font-weight: 600; color: var(--fg); font-size: var(--fz-h3); }
/* Body italics in Lato are subtle (humanist sans), not romantic-serif.
   The default `p` is left non-italic; reach for explicit <em> or `.italic` when
   you want the italic voice. */
p  { font-family: var(--font-body); font-size: var(--fz-body); line-height: 1.7; color: var(--fg-soft); }
small { font-family: var(--font-meta); font-size: var(--fz-meta); color: var(--fg-muted); }
em { font-style: italic; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-light); }
hr {
  border: 0;
  height: 1px;
  background: var(--gold-rule);
  width: 52px;
  margin: 0 auto;
}

/* ── Family utilities ────────────────────────────────────────────────── */
/* `.bebas` is the canonical class. `.cinzel` is kept as a legacy alias so existing
   markup keeps working — both resolve to var(--font-display) (now Bebas Neue). */
.bebas    { font-family: var(--font-display) !important; }
.cinzel   { font-family: var(--font-display) !important; }
/* `.lato` is the canonical body class. `.garamond` is kept as a legacy alias so
   existing markup keeps working — both resolve to var(--font-body) (now Lato). */
.lato     { font-family: var(--font-body) !important; }
.garamond { font-family: var(--font-body) !important; }
.dm       { font-family: var(--font-meta) !important; }

/* ── Color utilities ─────────────────────────────────────────────────── */
.fg       { color: var(--fg); }
.fg-soft  { color: var(--fg-soft); }
.fg-muted { color: var(--fg-muted); }
.fg-faint { color: var(--fg-faint); }
.text-gold       { color: var(--gold); }
.bg-canvas       { background: var(--bg); }
.bg-surface      { background: var(--bg-soft); }

/* ── Eyebrow (UPPERCASE Cinzel labels above section titles) ──────────── */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fz-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--gold);
  text-transform: uppercase;
  opacity: 0.8;
}
.eyebrow--wide  { letter-spacing: var(--tracking-eyebrow-wide); }
.eyebrow--tight { letter-spacing: var(--tracking-eyebrow-tight); }

/* ── Gold rule (the recurring hairline ornament) ─────────────────────── */
.gold-rule {
  width: 52px;
  height: 1px;
  background: var(--gold-rule);
  margin: 0 auto;
}
.gold-rule--wide { width: 80px; }

/* labeled divider — gradient | label | gradient */
.divi {
  display: flex; align-items: center; gap: 14px; justify-content: center;
  margin: 24px 0;
}
.divi::before, .divi::after {
  content: ''; flex: 1; max-width: 100px; height: 1px;
}
.divi::before { background: linear-gradient(90deg, transparent, var(--gold-a50)); }
.divi::after  { background: linear-gradient(90deg, var(--gold-a50), transparent); }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.gold-btn {
  display: inline-block;
  text-decoration: none;
  background: var(--gold-btn-grad);
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 28px;
  border: none;
  cursor: pointer;
  transition: all 0.28s var(--ease);
  clip-path: var(--chamfer);
}
.gold-btn:hover {
  background: var(--gold-btn-hover);
  box-shadow: var(--shadow-gold-btn);
  transform: translateY(-1px);
  color: var(--bg);
}
.gold-btn--sm { font-size: 11px; padding: 10px 20px; clip-path: var(--chamfer-sm); }

.ghost-btn {
  display: inline-block;
  text-decoration: none;
  border: 1px solid var(--gold-a30);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 22px;
  background: transparent;
  cursor: pointer;
  transition: all 0.25s var(--ease);
}
.ghost-btn:hover { background: var(--gold-a07); border-color: var(--gold); color: var(--gold-light); }
.ghost-btn--sm { font-size: 11px; padding: 9px 18px; }

/* ── Card ────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-soft);
  border: var(--hairline);
  overflow: hidden;
  transition: all var(--dur-card) var(--ease);
}
.card:hover {
  border-color: var(--gold-a50);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
.card--vip {
  border-color: rgba(200, 169, 110, 0.35);
  box-shadow: var(--gold-glow);
}

/* ── Chip ────────────────────────────────────────────────────────────── */
.chip {
  font-family: var(--font-display);
  font-size: var(--fz-chip);
  letter-spacing: 0.06em;
  background: var(--gold-a07);
  border: 1px solid rgba(200,169,110,0.2);
  color: rgba(200, 169, 110, 0.75);
  padding: 3px 9px;
  display: inline-block;
  margin: 2px;
}

/* ── Badges (review platforms only) ──────────────────────────────────── */
.badge-booking {
  background: var(--booking-bg);
  border: 1px solid var(--booking-border);
  color: var(--booking-fg);
  font-family: var(--font-meta);
  font-size: 11px; font-weight: 500;
  padding: 3px 10px;
}
.badge-tripadvisor {
  background: var(--tripadvisor-bg);
  border: 1px solid var(--tripadvisor-border);
  color: var(--tripadvisor-fg);
  font-family: var(--font-meta);
  font-size: 11px; font-weight: 500;
  padding: 3px 10px;
}

/* ── Tabs ────────────────────────────────────────────────────────────── */
.tab {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: var(--tracking-tabs);
  text-transform: uppercase;
  padding: 12px 24px;
  border: 1px solid rgba(200,169,110,0.15);
  background: transparent;
  color: rgba(245, 237, 214, 0.55);
  cursor: pointer;
  transition: all 0.25s var(--ease);
  white-space: nowrap;
}
.tab.is-on {
  background: rgba(200,169,110,0.10);
  border-color: var(--gold-a50);
  color: var(--gold);
}
.tab:hover:not(.is-on) {
  border-color: rgba(200, 169, 110, 0.28);
  color: rgba(245, 237, 214, 0.85);
  background: rgba(200, 169, 110, 0.03);
}

/* ── List row (used in Extras tab) ───────────────────────────────────── */
.row-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--gold-a07);
  transition: background 0.2s;
}
.row-item:hover { background: rgba(200,169,110,0.025); }
.row-item:last-child { border-bottom: none; }

/* ── Stars rating ────────────────────────────────────────────────────── */
.stars { color: var(--gold); font-size: 13px; letter-spacing: 2px; }

/* ── Noise overlay for hero ──────────────────────────────────────────── */
.noise-layer {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");
}

/* ── Photography filter (always dim warm photos on rest) ─────────────── */
.photo-dim { filter: brightness(0.85) saturate(0.88) contrast(1.04); transition: filter 0.45s; }
.photo-dim:hover, *:hover > .photo-dim { filter: brightness(0.95) saturate(1.0); }

/* ── Animation primitives ────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeUp 0.45s var(--ease) forwards; }