/* Optechfy “Zendesk-like” surface: ink + lime + generous white space.
   Serif (Lora) on all semantic headings (h1–h6) + .font-display;
   Vanilla Sans on body, UI, paragraphs, and non-heading copy. */

@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400;1,500&display=swap");

:root {
  --op-ink: #121c2d;
  --op-muted: #4d5e77;
  --op-line: #e6e8eb;
  --op-surface: #ffffff;
  --op-soft: #f8f9f9;
  --op-lime: #d4f079;
  --op-lime-hover: #c5e86d;
  --op-forest: #0d3d2e;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: rgba(212, 240, 121, 0.45);
  color: var(--op-ink);
}

.font-sans,
.font-serif {
  font-family: "Vanilla Sans", Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-display {
  font-family: "Lora", Charter, "Bitstream Charter", "Sitka Text", Georgia, serif;
  color: var(--op-ink);
  letter-spacing: -0.02em;
}

/* Dark CTA / gradient bands: heading ink rule wins over Tailwind text-white (load order).
   Put `zen-dark-band` + a light `text-*` on the section so headings can inherit. */
.zen-dark-band :where(h1, h2, h3, h4, h5, h6, .font-display) {
  color: inherit;
}

/* Large testimonial / pull-quote (optional class on blockquotes) */
.pull-quote,
blockquote.pull-quote {
  font-family: "Lora", Charter, "Bitstream Charter", "Sitka Text", Georgia, serif;
  color: var(--op-ink);
  font-weight: 500;
  line-height: 1.45;
}

/* Softer default paragraph rhythm when pages don’t override */
body.font-sans p {
  line-height: 1.65;
}