/* =========================================================
   PESAID KE — BRAND TOKENS
   Palette taken from the 2026 logo. Change colors here only.
========================================================= */
:root {
    --brand-primary:       #014429;  /* deep forest green: wordmark */
    --brand-primary-dark:  #012B1A;  /* footer, hover on primary */
    --brand-accent:        #058A26;  /* bright green: links, hovers, buttons */
    --brand-accent-light:  #8FD9A8;  /* accent on dark backgrounds */
    --brand-maroon:        #740B02;  /* sparing highlight: donate, dates, dots */
    --brand-maroon-dark:   #5A0801;
    --brand-text:          #1A2B22;  /* body text */
    --brand-soft:          #F2F7F4;  /* hover rows, alternating sections */
    --brand-soft-2:        #E3EFE7;
    --brand-border:        #D5E5DB;
}

/* ---------- Base ---------- */
.text-body          { color: var(--brand-text); }
a:focus-visible,
button:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }

/* ---------- Text ---------- */
.text-brand         { color: var(--brand-primary); }
.text-accent        { color: var(--brand-accent); }
.text-accent-light  { color: var(--brand-accent-light); }
.text-maroon        { color: var(--brand-maroon); }

/* ---------- Backgrounds ---------- */
.bg-brand           { background-color: var(--brand-primary); }
.bg-brand-dark      { background-color: var(--brand-primary-dark); }
.bg-soft            { background-color: var(--brand-soft); }
.border-brand       { border-color: var(--brand-primary); }

/* ---------- Hovers ---------- */
.hover-accent:hover        { color: var(--brand-accent); }
.hover-accent-light:hover  { color: var(--brand-accent-light); }
.hover-soft:hover          { background-color: var(--brand-soft); }

/* ---------- Buttons ---------- */
.btn-brand  { background-color: var(--brand-primary); color: #fff; transition: background-color .2s ease; }
.btn-brand:hover  { background-color: var(--brand-primary-dark); }
.btn-accent { background-color: var(--brand-accent); color: #fff; transition: background-color .2s ease; }
.btn-accent:hover { background-color: var(--brand-primary); }
.btn-donate { background-color: var(--brand-maroon); color: #fff; transition: background-color .2s ease; }
.btn-donate:hover { background-color: var(--brand-maroon-dark); }
.focus-brand:focus { outline: none; box-shadow: 0 0 0 2px var(--brand-accent); }

/* ---------- Footer (dark green) ---------- */
.text-footer        { color: rgba(255,255,255,.78); }
.text-footer-muted  { color: rgba(255,255,255,.60); }
.text-footer-head   { color: rgba(255,255,255,.92); }
.border-footer      { border-color: rgba(255,255,255,.14); }
.footer-card        { background-color: rgba(255,255,255,.06); transition: background-color .2s ease; }
.footer-card:hover  { background-color: rgba(255,255,255,.12); }
.sdg-badge          { background-color: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); transition: background-color .2s ease; }
.sdg-badge:hover    { background-color: var(--brand-accent); border-color: var(--brand-accent); }

/* ---------- Brand tagline (matches logo) ---------- */
.brand-tagline      { letter-spacing: .06em; font-size: .62rem; font-weight: 700; white-space: nowrap; }
.brand-tagline .dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin: 0 .45em; vertical-align: middle; }
.brand-tagline .dot-accent { background: var(--brand-accent); }
.brand-tagline .dot-maroon { background: var(--brand-maroon); }

/* =========================================================
   LEGACY RED → BRAND REMAP  (transitional)
   Page templates (home, news, contact…) still use Tailwind red
   classes. This maps them to the brand until each template is
   updated. Delete this section once no red-* classes remain.
========================================================= */
.bg-red-50,  .hover\:bg-red-50:hover   { background-color: var(--brand-soft) !important; }
.bg-red-100, .hover\:bg-red-100:hover  { background-color: var(--brand-soft-2) !important; }
.bg-red-500, .bg-red-600,
.hover\:bg-red-500:hover, .hover\:bg-red-600:hover { background-color: var(--brand-primary) !important; }
.bg-red-700, .bg-red-800, .bg-red-900,
.hover\:bg-red-700:hover, .hover\:bg-red-800:hover { background-color: var(--brand-primary-dark) !important; }

.text-red-100, .text-red-200, .text-red-300 { color: #CDEBD6 !important; }
.text-red-400, .text-red-500, .text-red-600,
.hover\:text-red-500:hover, .hover\:text-red-600:hover { color: var(--brand-accent) !important; }
.text-red-700, .text-red-800, .text-red-900,
.hover\:text-red-700:hover, .hover\:text-red-800:hover { color: var(--brand-primary) !important; }

.border-red-100, .border-red-200, .border-red-300 { border-color: var(--brand-border) !important; }
.border-red-400, .border-red-500, .border-red-600,
.border-red-700, .border-red-800 { border-color: var(--brand-primary) !important; }

.from-red-500, .from-red-600, .from-red-700 {
    --tw-gradient-from: var(--brand-primary) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(1,68,41,0)) !important;
}
.via-red-600, .via-red-700 {
    --tw-gradient-stops: var(--tw-gradient-from), var(--brand-primary), var(--tw-gradient-to, rgba(1,68,41,0)) !important;
}
.to-red-600, .to-red-700, .to-red-800, .to-red-900 { --tw-gradient-to: var(--brand-primary-dark) !important; }
.hover\:from-red-700:hover { --tw-gradient-from: var(--brand-primary-dark) !important; }
.hover\:to-red-800:hover   { --tw-gradient-to: var(--brand-primary-dark) !important; }

.focus\:ring-red-500:focus, .ring-red-500 { --tw-ring-color: var(--brand-accent) !important; }