/* ============================================================
   ZEN WEALTH - Brand foundation
   Quiet elegance · olive + bone · serif-led
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Noto+Serif:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* Agada is a paid display face; client will supply the woff2.
   For these mockups we fall back to Cormorant Garamond which
   shares the same elegant low-contrast serif character.       */
@font-face {
  font-family: 'Agada';
  src: local('Agada'); /* loads if installed, otherwise falls through to next stack item */
  font-display: swap;
}

:root {
  /* Brand palette - directly from guidelines */
  --zw-ink: #3b3c36;        /* deep charcoal-olive - primary text */
  --zw-olive: #575d3e;      /* olive green - accent / brand */
  --zw-bone: #f1f1f0;       /* warm off-white - primary background */

  /* Derived tones (kept within the same temperature) */
  --zw-bone-deep: #e6e5e0;
  --zw-bone-soft: #f7f6f3;
  --zw-ink-soft: rgba(59, 60, 54, 0.62);
  --zw-ink-faint: rgba(59, 60, 54, 0.22);
  --zw-olive-soft: rgba(87, 93, 62, 0.14);
  --zw-line: rgba(59, 60, 54, 0.16);
  --zw-line-soft: rgba(59, 60, 54, 0.08);

  /* Type stacks */
  --zw-display: 'Agada', 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --zw-serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --zw-body: 'Noto Serif', 'Cormorant Garamond', Georgia, serif;
  --zw-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', monospace;
}

/* ------------------------------------------------------------
   Reset (local to mockups - does not leak past artboards)
   ------------------------------------------------------------ */
.zw * { box-sizing: border-box; margin: 0; padding: 0; }
.zw {
  color: var(--zw-ink);
  background: var(--zw-bone);
  font-family: var(--zw-body);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.005em;
  font-size: 17px;
}
.zw img { display: block; max-width: 100%; }
.zw a { color: inherit; text-decoration: none; }
.zw button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.zw ul { list-style: none; }
.zw h1, .zw h2, .zw h3, .zw h4 {
  font-family: var(--zw-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--zw-ink);
}

#bone-h2{
   color: var(--zw-bone);
}

/* ------------------------------------------------------------
   Shared utility classes used across all three directions
   ------------------------------------------------------------ */

/* Tiny uppercase eyebrow label */
.zw-eyebrow {
  font-family: var(--zw-body);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--zw-olive);
  font-weight: 500;
}

.zw-eyebrow--ink { color: var(--zw-ink); }
.zw-eyebrow--bone { color: var(--zw-bone); opacity: 0.78; }

/* Italic serif accent used for taglines */
.zw-tagline {
  font-family: var(--zw-serif);
  font-style: italic;
  font-weight: 300;
  color: var(--zw-ink-soft);
}

/* Hairline divider */
.zw-rule {
  height: 1px;
  background: var(--zw-line);
  border: 0;
}

/* Placeholder image (subtle olive stripes + monospace caption) */
.zw-img {
  position: relative;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(87, 93, 62, 0.10) 0 1px,
      transparent 1px 9px
    ),
    var(--zw-bone-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--zw-ink-soft);
}
.zw-img--dark {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(241, 241, 240, 0.06) 0 1px,
      transparent 1px 9px
    ),
    var(--zw-ink);
  color: rgba(241, 241, 240, 0.55);
}
.zw-img__caption {
  font-family: var(--zw-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: 0.7;
}

/* WhatsApp pill - used by every direction (brand-defined CTA) */
.zw-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--zw-olive);
  color: var(--zw-bone);
  font-family: var(--zw-body);
  font-size: 14px;
  letter-spacing: 0.04em;
  border-radius: 999px;
  transition: background 0.25s ease;
}
.zw-whatsapp:hover { background: var(--zw-ink); }
.zw-whatsapp__icon {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Ghost / outline button */
.zw-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 24px;
  border: 1px solid var(--zw-ink);
  color: var(--zw-ink);
  font-family: var(--zw-body);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 0;
  transition: all 0.25s ease;
}
.zw-btn-ghost:hover { background: var(--zw-ink); color: var(--zw-bone); }

.zw-btn-ghost--bone {
  border-color: var(--zw-bone);
  color: var(--zw-bone);
}
.zw-btn-ghost--bone:hover { background: var(--zw-bone); color: var(--zw-ink); }

/* Inline link with serif italic + underline */
.zw-link {
  font-family: var(--zw-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--zw-olive);
  border-bottom: 1px solid var(--zw-olive);
  padding-bottom: 2px;
  transition: opacity 0.2s;
}
.zw-link:hover { opacity: 0.7; }