/* Shared SEO page theme. Rabbit Holes intentionally do not load this file. */
:root {
  --bg-papyrus: #FAF8F2;     /* cream — matches React landing */
  --bg-white: #FFFFFF;
  --text-dark: #1B3A25;      /* racing green */
  --text-slate: #5A6B5F;     /* racing-tinted muted */
  --text-light: #8A9580;     /* racing-300 */
  --emerald-dark: #1B3A25;   /* racing */
  --emerald-mid: #264F33;    /* racing-700 */
  --emerald-accent: #B8942E; /* gold — primary accent on SEO pages */
  --emerald-light: #F5E9C8;  /* gold-100 */
  --emerald-glow: rgba(184, 148, 46, 0.25);
  --border-color: #E5E1D6;   /* divider */
}

html {
  background: var(--bg-papyrus);
}

body {
  background-color: var(--bg-papyrus) !important;
  color: var(--text-dark) !important;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
.post-title,
.index-hero h1,
.tool-card h2,
.content-section h2,
.intro-card h2,
.hub-links-card h2,
.pillar-hero h1 {
  font-family: 'Playfair Display', Georgia, serif !important;
  letter-spacing: 0 !important;
}

.content h1,
.content h2,
.content h3,
.content-section h2,
.content-section h3,
.intro-card h2,
.hub-links-card h2,
.tool-card h2,
.tool-pathway h2,
.post-title,
.post-card h2,
.answer-card h3,
.cluster-card h3,
.step-card h3 {
  color: var(--text-dark) !important;
}

.content p,
.content li,
.content-section p,
.content-section li,
.intro-card p,
.hub-links-card p,
.tool-card .tool-desc,
.tool-pathway p,
.post-excerpt,
.answer-card p,
.cluster-card p,
.step-card p,
.hero-card-body p {
  color: var(--text-slate) !important;
}

.hero-wrapper,
.pillar-hero {
  background: linear-gradient(180deg, var(--emerald-dark) 0%, var(--emerald-mid) 100%) !important;
}

.index-hero h1,
.pillar-hero h1 {
  color: #FFFFFF !important;
  background: none !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

.index-hero p,
.pillar-lede {
  color: rgba(255, 255, 255, 0.88) !important;
}

.post-card,
.intro-card,
.hub-links-card,
.tool-card,
.tool-pathway,
.answer-card,
.cluster-card,
.step-card,
.highlight-box,
.resources-box,
.references,
.hero-card,
.comparison-table {
  background-color: var(--bg-white) !important;
  border-color: var(--border-color) !important;
}

.cta-section,
.cta-section h2,
.cta-section h3,
.cta-section p {
  color: #FFFFFF !important;
}

.content a,
.content-section a,
.intro-card a,
.hub-links-card a,
.post-content a {
  color: #264F33;
}