/* ─────────────────────────────────────────────────────────
   Theme tokens for the 3 variants.
   ───────────────────────────────────────────────────────── */

/* ════ VARIANT A — FERN & FLORA (Botanical Garden) ════ */
[data-variant="botanical"] {
  --bg: #f5f0e6;
  --surface: #ffffff;
  --ink: #3a4133;
  --ink-strong: #1f2a1c;
  --ink-muted: #6b7268;
  --rule: rgba(31, 42, 28, 0.12);
  --accent: #b7593b;          /* terracotta */
  --accent-hover: #9c4830;
  --accent-ink: #faf6ef;
  --hero-bg: #ebe4d5;
  --placeholder: linear-gradient(135deg, #d7d0bd 0%, #c4cab1 100%);
  --shadow: rgba(31, 42, 28, 0.18);
  --nav-bg: rgba(245, 240, 230, 0.85);
  --footer-bg: #1f2a1c;
  --footer-ink: #ebe4d5;
  --footer-rule: rgba(235, 228, 213, 0.15);

  --font-display: "DM Serif Display", "Times New Roman", serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --display-weight: 400;
  --display-tracking: -0.02em;
  --brand-tracking: 0.01em;

  --radius-btn: 999px;
  --radius-card: 6px;
  --radius-hero: 8px;
  --radius-input: 6px;
  --nav-case: none;
  --btn-case: none;
}

/* ════ VARIANT B — MESA AESTHETICS (Desert Luxe) ════ */
[data-variant="desert"] {
  --bg: #f4ece1;
  --surface: #fbf6ee;
  --ink: #4a3a2c;
  --ink-strong: #2d1f15;
  --ink-muted: #8b7560;
  --rule: rgba(45, 31, 21, 0.14);
  --accent: #b8634a;          /* clay red */
  --accent-hover: #9c4f3a;
  --accent-ink: #fbf6ee;
  --hero-bg: #ead9c2;
  --placeholder: linear-gradient(135deg, #dec5a4 0%, #c19c7a 100%);
  --shadow: rgba(45, 31, 21, 0.22);
  --nav-bg: rgba(244, 236, 225, 0.88);
  --footer-bg: #2d1f15;
  --footer-ink: #ead9c2;
  --footer-rule: rgba(234, 217, 194, 0.15);

  --font-display: "Cormorant Garamond", "Cormorant", serif;
  --font-body: "Outfit", system-ui, sans-serif;
  --display-weight: 500;
  --display-tracking: -0.005em;
  --brand-tracking: 0.18em;

  --radius-btn: 2px;
  --radius-card: 2px;
  --radius-hero: 2px;
  --radius-input: 2px;
  --nav-case: uppercase;
  --btn-case: uppercase;
}

/* ════ VARIANT C — MAISON VERT (Modern Lux Emerald) ════ */
[data-variant="maison"] {
  --bg: #f6f1e7;             /* ivory */
  --surface: #ffffff;
  --ink: #1a2620;
  --ink-strong: #0a1612;
  --ink-muted: #6b756f;
  --rule: rgba(10, 22, 18, 0.10);
  --accent: #b08858;          /* champagne gold */
  --accent-hover: #94703f;
  --accent-ink: #0a1612;
  --hero-bg: #0a1612;         /* dark hero — distinctive! */
  --placeholder: linear-gradient(135deg, #1a3a2f 0%, #0a1612 100%);
  --shadow: rgba(10, 22, 18, 0.25);
  --nav-bg: rgba(246, 241, 231, 0.9);
  --footer-bg: #0a1612;
  --footer-ink: #f6f1e7;
  --footer-rule: rgba(246, 241, 231, 0.12);

  --font-display: "Italiana", "Cormorant Garamond", serif;
  --font-body: "Be Vietnam Pro", "Manrope", system-ui, sans-serif;
  --display-weight: 400;
  --display-tracking: -0.01em;
  --brand-tracking: 0.24em;

  --radius-btn: 0px;
  --radius-card: 0px;
  --radius-hero: 0px;
  --radius-input: 0px;
  --nav-case: uppercase;
  --btn-case: uppercase;
}

/* Variant C uses dark hero with light text */
[data-variant="maison"] .hero {
  color: #f6f1e7;
}
[data-variant="maison"] .hero h1 { color: #f6f1e7; }
[data-variant="maison"] .hero .hero-sub { color: rgba(246, 241, 231, 0.75); }
[data-variant="maison"] .hero .eyebrow { color: #b08858; }
[data-variant="maison"] .hero .eyebrow::before { background: #b08858; }
[data-variant="maison"] .hero .btn-ghost {
  color: #f6f1e7;
  border-color: rgba(246, 241, 231, 0.6);
}
[data-variant="maison"] .hero .btn-ghost:hover {
  background: #f6f1e7;
  color: #0a1612;
}
[data-variant="maison"] .page-hero {
  background: #0a1612;
  color: #f6f1e7;
}
[data-variant="maison"] .page-hero h1 { color: #f6f1e7; }
[data-variant="maison"] .page-hero p { color: rgba(246, 241, 231, 0.75); }
[data-variant="maison"] .page-hero .breadcrumb { color: rgba(246, 241, 231, 0.6); }
[data-variant="maison"] .page-hero .eyebrow { color: #b08858; }
[data-variant="maison"] .page-hero .eyebrow::before { background: #b08858; }

/* Desert: italic display feel */
[data-variant="desert"] h1, [data-variant="desert"] h2 {
  font-style: italic;
}

/* Botanical: serif keeps its weight */
[data-variant="botanical"] .brand { font-style: normal; }

/* Maison: thin tracked sans for nav */
[data-variant="maison"] .nav-links {
  gap: 22px;
}
[data-variant="maison"] .nav-links a {
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 400;
  white-space: nowrap;
}
[data-variant="maison"] .brand {
  white-space: nowrap;
}
[data-variant="maison"] .nav-cta {
  white-space: nowrap;
}

/* ── Maison atelier-specific polish ── */
[data-variant="maison"] h1 {
  font-weight: 400;
  letter-spacing: -0.015em;
  font-size: clamp(56px, 7vw, 108px);
}
[data-variant="maison"] h2 {
  font-weight: 400;
  letter-spacing: -0.005em;
}
[data-variant="maison"] .brand {
  font-size: 18px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
[data-variant="maison"] .eyebrow {
  letter-spacing: 0.28em;
}
[data-variant="maison"] .btn {
  letter-spacing: 0.16em;
  font-size: 12px;
  font-weight: 400;
  padding: 18px 30px;
}
[data-variant="maison"] .btn-primary {
  border: 1px solid var(--accent);
}
[data-variant="maison"] .nav-cta {
  background: transparent;
  color: var(--ink-strong);
  border: 1px solid var(--ink-strong);
  letter-spacing: 0.16em;
  font-weight: 400;
}
[data-variant="maison"] .nav-cta:hover {
  background: var(--ink-strong);
  color: var(--bg);
}
/* Gold thin rule decoration */
[data-variant="maison"] .gold-rule {
  display: block;
  width: 56px;
  height: 1px;
  background: var(--accent);
  margin: 32px 0;
}
[data-variant="maison"] .service-card {
  border-radius: 0;
  border: 1px solid var(--rule);
  background: transparent;
}
[data-variant="maison"] .service-card:hover {
  background: var(--surface);
}
[data-variant="maison"] .card { background: transparent; }
[data-variant="maison"] .trust-item .n {
  font-size: 64px;
  font-weight: 400;
}
[data-variant="maison"] .testimonial::before,
[data-variant="maison"] .testimonial::after { display: none; }
[data-variant="maison"] .footer-brand {
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-size: 22px;
}

/* Section: emerald (maison's signature dark green) */
[data-variant="maison"] .section-emerald {
  background: #0a1612;
  color: #f6f1e7;
}
[data-variant="maison"] .section-emerald h1,
[data-variant="maison"] .section-emerald h2,
[data-variant="maison"] .section-emerald h3,
[data-variant="maison"] .section-emerald h4 { color: #f6f1e7; }
[data-variant="maison"] .section-emerald p { color: rgba(246,241,231,0.78); }
[data-variant="maison"] .section-emerald .eyebrow { color: #b08858; }
[data-variant="maison"] .section-emerald .eyebrow::before { background: #b08858; }
[data-variant="maison"] .section-emerald .btn-ghost {
  color: #f6f1e7;
  border-color: rgba(246,241,231,0.6);
}
[data-variant="maison"] .section-emerald .btn-ghost:hover {
  background: #f6f1e7;
  color: #0a1612;
}
[data-variant="maison"] .section-emerald .card {
  border-color: rgba(246,241,231,0.15);
  background: transparent;
}
/* Non-maison variants get a fallback so section-emerald isn't broken */
.section-emerald {
  background: var(--footer-bg);
  color: var(--footer-ink);
}
.section-emerald h1, .section-emerald h2, .section-emerald h3 { color: var(--footer-ink); }
.section-emerald p { color: rgba(255,255,255,0.75); }

/* Desert nav links: serif uppercase */
[data-variant="desert"] .nav-links a {
  font-size: 11px;
  letter-spacing: 0.18em;
}

/* Hero image styling per variant */
[data-variant="botanical"] .hero-image {
  border: 1px solid var(--rule);
}
[data-variant="maison"] .hero-image {
  aspect-ratio: 3/4;
}

/* Section background variations to add rhythm */
.section-tint { background: var(--hero-bg); }
[data-variant="maison"] .section-tint { background: #ede4d3; }
[data-variant="desert"] .section-tint { background: #ead9c2; }
[data-variant="botanical"] .section-tint { background: #ebe4d5; }

.section-dark { background: var(--footer-bg); color: var(--footer-ink); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--footer-ink); }
.section-dark p { color: rgba(255,255,255,0.75); }