/* =====================================================================
 * Savannah Alliance — Substack Theme Kit
 * Paste into Substack → Settings → Website → Custom CSS (paid plans only).
 * Mirrors site tokens 1:1 so the Substack publication reads as the same brand.
 * Last sync: keep in sync with src/styles.css.
 * ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&display=swap");

:root {
  /* Brand palette — light */
  --sa-ivory:      #faf7f0;
  --sa-navy:       #1f2a44;
  --sa-navy-deep:  #131a2e;
  --sa-sage:       #6b8e7a;
  --sa-gold:       #c69a4a;
  --sa-charcoal:   #2a2b30;
  --sa-rule:       #e2ddd1;

  --sa-font-serif: "Source Serif 4", Georgia, serif;
  --sa-font-sans:  "Inter", system-ui, -apple-system, sans-serif;
}

/* ---------- Global typography ---------- */
html, body,
.publication, .post, .single-post, .archive {
  font-family: var(--sa-font-sans) !important;
  color: var(--sa-charcoal) !important;
  background: var(--sa-ivory) !important;
}

h1, h2, h3, h4, h5, h6,
.post-title, .pub-name, .navbar-title {
  font-family: var(--sa-font-serif) !important;
  font-weight: 400 !important;
  letter-spacing: -0.015em;
  color: var(--sa-navy-deep) !important;
}

p, li, blockquote, .body, .available-content {
  font-family: var(--sa-font-sans) !important;
  line-height: 1.65;
}

/* ---------- Hairline editorial accents ---------- */
hr, .border-detail-themed, .navbar, .footer {
  border-color: var(--sa-rule) !important;
}

/* ---------- Links & accents ---------- */
a, .post-meta a, .button-link {
  color: var(--sa-navy) !important;
  border-bottom: 1px solid color-mix(in oklab, var(--sa-navy) 25%, transparent);
  text-decoration: none !important;
}
a:hover { border-bottom-color: var(--sa-navy) !important; }

/* ---------- Primary CTA / subscribe button ---------- */
button.primary,
.button.primary,
.subscribe-btn,
.subscribe-input-container button {
  background: var(--sa-navy) !important;
  color: var(--sa-ivory) !important;
  border: none !important;
  border-radius: 4px !important;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 12px 20px !important;
}
button.primary:hover,
.button.primary:hover { background: var(--sa-navy-deep) !important; }

/* ---------- Eyebrow / kicker ---------- */
.section-title, .kicker, .topbar-section .pub-name {
  font-family: var(--sa-font-sans) !important;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 11px !important;
  color: var(--sa-sage) !important;
}

/* ---------- Footer ---------- */
.footer, .footer-wrap {
  background: var(--sa-navy-deep) !important;
  color: var(--sa-ivory) !important;
}
.footer a { color: var(--sa-ivory) !important; opacity: 0.85; }

/* ---------- Dark mode parity ---------- */
@media (prefers-color-scheme: dark) {
  html, body, .publication { background: #1a2236 !important; color: #f5efe2 !important; }
  h1, h2, h3, h4, h5, h6 { color: #f5efe2 !important; }
  a { color: #b9c8ea !important; }
  hr, .navbar { border-color: #2f3a55 !important; }
}