/* Co-oppetition Consulting — Color Tokens
   The brand lives on dark, near-black green-tinted backgrounds with a
   ladder of greens from deep forest to pale sage. Greens carry meaning;
   white is reserved for primary headings and nav. */

:root {
  /* ── Backgrounds (dark, green-tinted near-blacks) ── */
  --bg-page: #111410;        /* primary page background */
  --bg-alt: #171C14;         /* alternating sections, footer */
  --bg-card: #1C2419;        /* content cards */
  --bg-cta: #2A5C35;         /* CTA band background */

  /* ── Green ladder (darkest → lightest) ── */
  --green-deep: #2A5C35;     /* deep green, CTA band */
  --green-brand: #326B3D;    /* brand green, primary borders/accents */
  --green-hover: #3E8048;    /* hover states */
  --green-mid: #5A9E5E;      /* mid accent */
  --green-highlight: #88B86A;/* highlight — h1 accent word, bullets, icons */
  --green-pale: #AECF8A;     /* pale — eyebrow labels, card heads */
  --green-sub: #9DC07E;      /* secondary labels, sub-text */
  --green-body: #BAD49A;     /* body copy on dark */
  --green-heading: #D0E8AE;  /* secondary headings on dark */

  /* ── Contrast / surfaces ── */
  --white: #FFFFFF;          /* primary headings, nav text */
  --white-surface: #F4F7F2;  /* hero card, metric box surfaces (light) */
  --ink: #1A1C18;            /* near-black ink for text on light surfaces */
  --ink-soft: #2A3D2C;       /* body text on light surfaces */

  /* ── Borders ── */
  --border-dim: rgba(50, 107, 61, 0.18);    /* subtle card border */
  --border-bright: rgba(50, 107, 61, 0.42); /* visible / interactive border */
  --border-white: rgba(255, 255, 255, 0.12);

  /* ── Focus ── */
  --focus: #88B86A;

  /* ── Translucent surfaces ── */
  --header-bg: rgba(17, 20, 16, 0.9); /* sticky nav backdrop, translucent bg-page */

  /* ── Gradient heading text (coop-grad-text) ── */
  --grad-text-1: #88B86A;
  --grad-text-2: #D0E8AE;
  --grad-text-3: #FFFFFF;

  /* ── Document / presentation palette (Word, PowerPoint, DOCX) ── */
  --doc-green: #26603E;      /* headings, accents in docs */
  --doc-bg: #181A16;         /* PPTX hero & divider slides */
  --doc-accent: #97BC62;     /* labels, icons, emphasis in docs */
  --doc-card: #1E2819;       /* PPTX content card blocks */
  --doc-text: #D4E8C2;       /* body text on dark in PPTX */
  --doc-tint: #F0F5EE;       /* alternating strips in PPTX */

  /* ── Semantic aliases ── */
  --surface-page: var(--bg-page);
  --surface-section: var(--bg-alt);
  --surface-card: var(--bg-card);
  --text-heading: var(--white);
  --text-subheading: var(--green-heading);
  --text-body: var(--green-body);
  --text-muted: var(--green-sub);
  --text-eyebrow: var(--green-pale);
  --text-accent: var(--green-highlight);
  --accent: var(--green-highlight);
  --accent-strong: var(--green-brand);
}

/* ── Light theme ──
   Opt-in via a "light" toggle in the nav (persisted to localStorage as
   coop-theme). Only the tokens that read as text or large-surface
   backgrounds on the main page canvas are overridden here — colors used
   for small self-contained accents (buttons, badges, pills, the CTA
   band) are deliberately left as literal brand-green values everywhere
   they're used, since those pairings are fixed regardless of theme and
   already read fine on both a dark and a light page. */
/* ── Logo swap ──
   The dark-mode nav mark relies on mix-blend-mode:lighten against a
   near-black background and goes invisible on a light page, so the
   light theme swaps in the green-on-white mark instead (data-coop-logo
   attribute set on both <img> tags wherever the logo appears). */
[data-coop-logo="light"] { display: none; }
:root[data-theme="light"] [data-coop-logo="dark"] { display: none; }
:root[data-theme="light"] [data-coop-logo="light"] { display: inline-block; }

/* ── Theme toggle switch (injected into the nav by coop-nav.js) ── */
.coop-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--border-bright);
  border-radius: 999px;
  padding: 4px;
  cursor: pointer;
  font-family: 'Public Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--green-body);
  line-height: 1;
}
.coop-theme-toggle-track {
  position: relative;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: rgba(50, 107, 61, 0.4);
  flex: 0 0 auto;
}
.coop-theme-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
  transition: transform 0.2s ease;
}
:root[data-theme="light"] .coop-theme-toggle-thumb { transform: translateX(16px); }

:root[data-theme="light"] {
  /* Matches the independent-schools/camps/small-business/readiness pricing
     sheets exactly: one consistent accent green (no second, slightly-off
     mid-green), off-white page, white cards, near-black ink for headings. */
  --bg-page: #F7FAF3;
  --bg-alt: #EDF3E7;
  --bg-card: #FFFFFF;

  --white: #1A1C18;          /* primary headings, nav text -> near-black ink */
  --green-heading: #24391F;  /* secondary headings on the page */
  --green-body: #3A4A3A;     /* body copy */
  --green-pale: #326B3D;     /* eyebrow labels, card heads -> the one accent green */
  --green-sub: #5C6F5C;      /* secondary labels, sub-text */
  --green-highlight: #326B3D;/* h1 accent word, bullets, icons, link hover */
  --focus: #326B3D;

  --border-dim: rgba(50, 107, 61, 0.22);
  --border-bright: rgba(50, 107, 61, 0.42);
  --border-white: rgba(26, 28, 24, 0.12);

  --header-bg: rgba(247, 250, 243, 0.88);

  --grad-text-1: #326B3D;
  --grad-text-2: #24391F;
  --grad-text-3: #1A1C18;
}