/**
 * Livvo global typography — use on every page.
 * Matches index.html marketing spec: Sora headings, DM Sans body, muted body #4b7c6b.
 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green: #059669;
  --green-light: #10b981;
  --green-dark: #047857;
  --bg-dark: #f0f7f2;
  --surface-dark: #ffffff;
  --border-dark: #d4e5dc;
  --text-dark: #1a2e24;
  --muted-dark: #4b7c6b;
  --lv-hero-title: #064e3b;
  --lv-accent: #059669;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg-dark);
  color: var(--text-dark);
  font-family: "DM Sans", sans-serif;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: "Sora", sans-serif;
}

/* Section labels — HOW IT WORKS, LAUNCHING IN, etc. */
.section-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 12px;
}

.section-title {
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
  color: var(--lv-hero-title);
}

.section-sub {
  font-size: 15px;
  font-weight: 400;
  color: var(--muted-dark);
  line-height: 1.75;
}

/* Hero title + accent (span or em, never italic) */
.hero h1 {
  font-family: "Sora", sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 3rem);
  letter-spacing: -0.04em;
  line-height: 1.15;
  margin-bottom: 20px;
  color: var(--lv-hero-title);
}

.hero h1 span,
.hero h1 em {
  font-style: normal;
  color: var(--lv-accent);
}

.hero p {
  font-size: 15px;
  font-weight: 400;
  color: var(--muted-dark);
  line-height: 1.75;
  max-width: 640px;
  margin: 0 auto 22px;
}

/* Nav link typography (layout lives in styles.css or per-page) */
.nav-links a {
  font-size: 0.85rem;
  color: var(--muted-dark);
  text-decoration: none;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--text-dark);
}

.btn-nav {
  font-size: 0.83rem;
  font-weight: 600;
  text-decoration: none;
}

.logo-word {
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.04em;
  color: var(--text-dark);
}

.logo-word span {
  color: var(--green);
}

/* Post like (community feed + thread) */
.like-btn {
  color: #9ca3af;
  cursor: pointer;
}
.like-btn:not(.liked) svg path {
  fill: none;
  stroke: currentColor;
}
.like-btn.liked {
  color: #059669;
}
.like-btn.liked svg,
.like-btn.liked svg path {
  fill: #059669;
  stroke: #059669;
}