/* ============================================
   nonprofits.club — Unified Theme
   Single source of truth for brand tokens,
   typography, and shared component styles.
   Load BEFORE style.css or kb.css.
   ============================================ */

/* --- Brand Tokens --- */
:root {
  /* Primary Palette */
  --nc-teal: #0D7377;
  --nc-teal-dark: #095457;
  --nc-teal-light: #00D4AA;
  --nc-coral: #FF6B6B;
  --nc-coral-dark: #e55a5a;
  --nc-gold: #FFB800;
  --nc-gold-dark: #E6A500;
  --nc-purple: #8B5CF6;

  /* Neutral Palette */
  --nc-charcoal: #2D3436;
  --nc-white: #FFFFFF;
  --nc-light: #F8F9FA;
  --nc-gray-100: #F5F5F5;
  --nc-gray-200: #E9ECEF;
  --nc-gray-600: #6C757D;

  /* Dark-Mode Neutrals */
  --nc-navy: #0a0f1e;
  --nc-midnight: #0d1b3e;
  --nc-text: #F0F4F8;
  --nc-text-secondary: #A0AEC0;
  --nc-text-tertiary: #6B7A8F;
  --nc-card-bg: rgba(20, 30, 60, 0.5);
  --nc-card-border: rgba(139, 92, 246, 0.12);
  --nc-glass: rgba(10, 15, 30, 0.85);

  /* Shared Tokens */
  --nc-radius: 12px;
  --nc-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --nc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* --- Typography Base --- */
body {
  font-family: var(--nc-font);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* --- Shared Level Badges (consistent across all pages) --- */
.level-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--nc-white);
  flex-shrink: 0;
}
.level-badge.l1 { background: var(--nc-teal); }
.level-badge.l2 { background: linear-gradient(135deg, var(--nc-teal), var(--nc-purple)); }
.level-badge.l3 { background: var(--nc-coral); }
.level-badge.l4 { background: var(--nc-gold); color: var(--nc-charcoal); }
.level-badge.l5 { background: linear-gradient(135deg, var(--nc-gold), var(--nc-gold-dark)); color: var(--nc-charcoal); }

/* --- Shared Level Color Accents --- */
.level-accent-1 { color: var(--nc-teal); }
.level-accent-2 { color: var(--nc-purple); }
.level-accent-3 { color: var(--nc-coral); }
.level-accent-4 { color: #38BDF8; }
.level-accent-5 { color: var(--nc-gold); }

/* --- Shared Button Styles --- */
.btn-teal {
  background: var(--nc-teal);
  color: #fff;
  border: none;
  border-radius: .5rem;
  font-weight: 600;
  padding: .6rem 1.5rem;
  transition: var(--nc-transition);
}
.btn-teal:hover { background: var(--nc-teal-dark); color: #fff; transform: translateY(-1px); }

.btn-airec {
  background: var(--nc-coral);
  color: var(--nc-white);
  border: none;
  padding: .75rem 2rem;
  border-radius: .5rem;
  font-weight: 600;
  font-size: 1rem;
  transition: transform .15s, box-shadow .15s;
}
.btn-airec:hover { background: var(--nc-coral-dark); color: var(--nc-white); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,107,107,.35); }

.btn-outline-airec {
  border: 2px solid var(--nc-white);
  color: var(--nc-white);
  background: transparent;
  padding: .7rem 1.8rem;
  border-radius: .5rem;
  font-weight: 600;
  transition: background .2s, color .2s;
}
.btn-outline-airec:hover { background: var(--nc-white); color: var(--nc-teal); }

.btn-cta {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, var(--nc-coral), #ff8a6a);
  color: #fff;
  font-weight: 700;
  border-radius: 8px;
  border: none;
  font-size: 1rem;
  transition: var(--nc-transition);
}
.btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 107, 74, 0.35);
  color: #fff;
}

/* --- Selection Color --- */
::selection { background: rgba(13, 115, 119, 0.3); color: #fff; }

/* --- Images --- */
img { max-width: 100%; height: auto; }

/* --- Fade Animation --- */
.fade-in { animation: fadeIn 0.6s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* --- Shared Footer Base --- */
.site-footer, .kb-footer {
  font-size: .9rem;
}
.site-footer a, .kb-footer a { text-decoration: none; }
