/**
 * nimbio-blueprint.css — shared design tokens + universal patterns for
 * blueprint pages. Enqueued by nimbio-theme-tweaks.php ONLY on pages with
 * nimbio_blueprint_page=1 (2026-07-18 audit, Pillar 1 item: brand tokens
 * were hardcoded in 61 files; a token change was a 61-file sweep).
 *
 * Doctrine:
 * - NEW pages reference these classes/vars instead of re-pasting the rules.
 * - EXISTING pages migrate opportunistically — when a page is edited anyway,
 *   swap its copy-pasted rules for these classes in the same session. Never
 *   a bulk rewrite.
 * - Page-SPECIFIC styles stay in the page's own top-of-file <style> block.
 * - Only genuinely universal patterns belong here. When in doubt, keep it
 *   in the page.
 * - Sanctioned breakpoints: 767px (mobile) and 1024px (tablet) ONLY
 *   (mobile-qa skill).
 */

:root {
  --nb-purple: #807EFC;        /* brand primary — headings/accents; NOT body text on white */
  --nb-purple-text: #6B69D4;   /* AA-safe purple for inline text/links on white */
  --nb-green: #39FF14;         /* Signal Green CTA background */
  --nb-green-hover: #2FE010;
  --nb-ink: #1E1E1E;           /* body text; also the ONLY text color on green */
  --nb-muted: #595959;         /* small muted text — solid, never opacity */
  --nb-muted-lg: #4A4A4A;      /* larger muted text */
  --nb-surface: #F4F4F4;       /* recessed section background */
  --nb-radius: 16px;           /* cards + CTAs */
  --nb-radius-sm: 12px;
  --nb-radius-pill: 999px;     /* chips */
  --nb-shadow: 0 4px 16px rgba(0,0,0,0.08);        /* resting */
  --nb-shadow-hover: 0 8px 24px rgba(0,0,0,0.16);
}

/* Layout containers */
.nb-inner { max-width: 1000px; margin: 0 auto; padding: 0 20px; }
.nb-inner-narrow { max-width: 800px; margin: 0 auto; padding: 0 20px; }
.nb-section { padding: 56px 0; }
.nb-section-alt { background: var(--nb-surface); }

/* Card */
.nb-card {
  background: #FFFFFF;
  border-radius: var(--nb-radius);
  box-shadow: var(--nb-shadow);
  padding: 24px;
}

/* Primary CTA — Signal Green with ink text (never white on green).
   16px padding + 16px line-height = 48px min touch target. */
.nb-cta {
  display: inline-block;
  background: var(--nb-green);
  color: var(--nb-ink);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  padding: 16px 32px;
  border-radius: var(--nb-radius);
  text-decoration: none;
  transition: background .15s ease;
}
.nb-cta:hover { background: var(--nb-green-hover); }

/* Muted text — solid grays, never opacity on ink */
.nb-muted { color: var(--nb-muted); }
.nb-muted-lg { color: var(--nb-muted-lg); }

/* Dual desktop-table / mobile-stacked-cards toggle (mobile-qa rule:
   never overflow-x scroll as the only mobile treatment). */
.nb-desktop { display: block; }
.nb-mobile { display: none; }
@media (max-width: 767px) {
  .nb-desktop { display: none !important; }
  .nb-mobile { display: block !important; }
}