/* ============================================================
   enlightIn brand tokens
   Source: Context/enlightIn brand on a page.pdf
   Use:    <link rel="stylesheet" href="assets/brand-tokens.css">
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&display=swap");

:root {
  /* ── Core palette ───────────────────────────────────────── */
  --sage-deep: #1c7967;
  --sage-mid: #3a9478;
  --sage-light: #aad6a0;
  --gold: #edc369;
  --teal: #01949a;
  --navy: #00162b;
  --grey-light: #eeeeee;
  --white: #ffffff;

  /* ── Semantic roles ─────────────────────────────────────── */
  --brand-primary: var(--sage-deep);
  --brand-primary-hover: #166253;
  --brand-accent: var(--gold);
  --brand-accent-alt: var(--teal);
  --brand-ink: var(--navy);

  --surface: #fbfcfb;
  --surface-alt: var(--grey-light);
  --surface-card: #ffffff;
  --surface-muted: rgba(170, 214, 160, 0.12);

  --text-primary: var(--navy);
  --text-secondary: #4a5d55;
  --text-muted: #7a8c85;
  --text-on-brand: #ffffff;

  --border-subtle: rgba(0, 22, 43, 0.08);
  --border-strong: rgba(0, 22, 43, 0.16);

  /* ── Signature gradient (PDF calls 90°, practical is 135°) ── */
  --brand-gradient: linear-gradient(135deg, #1c7967 0%, #3a9478 30%, #7cbc8a 65%, #aad6a0 100%);
  --brand-gradient-soft: linear-gradient(
    135deg,
    rgba(28, 121, 103, 0.08) 0%,
    rgba(170, 214, 160, 0.12) 100%
  );

  /* ── Typography ─────────────────────────────────────────── */
  /* Heinemann Special (paid) → Fraunces fallback for headings.
     Swap in @font-face later when the file is available. */
  --font-heading: "Fraunces", "Nunito", Georgia, serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 22, 43, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 22, 43, 0.1);
  --shadow-lg: 0 12px 40px rgba(0, 22, 43, 0.16);
  --shadow-xl: 0 20px 60px rgba(0, 22, 43, 0.22);

  /* ── Radii ──────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
}

/* ── Wordmark utility ─────────────────────────────────────────
   Use on <img src="assets/enlightin-wordmark.png"> to flatten
   the PNG to white over dark / gradient backgrounds.
   For placement on light surfaces, use .wordmark--ink instead. */
.wordmark {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  align-self: flex-start; /* don't stretch inside flex parents */
  image-rendering: -webkit-optimize-contrast;
}
.wordmark--on-dark {
  filter: brightness(0) invert(1) contrast(1.6) drop-shadow(0 6px 28px rgba(0, 22, 43, 0.35));
}
.wordmark--on-light {
  /* flatten to navy ink */
  filter: brightness(0) saturate(100%) invert(8%) sepia(45%) saturate(3500%) hue-rotate(195deg)
    brightness(95%) contrast(105%);
}

/* ── Nav active state: gradient underline ──────────────────── */
nav.top-nav .nav-link.active {
  border-bottom-color: transparent !important;
  position: relative;
}
nav.top-nav .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #1c7967 0%, #aad6a0 100%);
}

/* ── Section label with gold dot ────────────────────────────── */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.section-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #edc369;
  box-shadow: 0 0 0 3px rgba(237, 195, 105, 0.18);
}

/* ── Body default (opt-in; pages can override) ──────────────── */
.brand-body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--surface);
}
.brand-body h1,
.brand-body h2,
.brand-body h3,
.brand-body h4,
.brand-body h5,
.brand-body h6 {
  font-family: var(--font-heading);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}