/* ============================================================
   MyFiji Pulse — Public theme tokens (single source of truth).
   Loaded ONLY via public_base.html, so it never affects admin,
   vote-flow, privacy, or help pages.

     --color-bg-warm         page background (warm off-white)
     --color-bg-section      alternating band background (warmer)
     --color-accent-red      Fijian-red accent (hover/focus only)
     --color-accent-red-ring accent red @80% for focus rings
     --font-heading          serif heading family

   Primary CTA blue stays on the existing Tailwind utilities (bg-blue-700);
   promote it to a token in Phase 2 if/when CTAs move to a .btn-primary class.
   ============================================================ */
:root {
  --color-bg-warm: #FAF7F2;
  --color-bg-section: #F5F0E8;
  --color-accent-red: #CF142B;
  --color-accent-red-ring: rgba(207, 20, 43, 0.8);
  --font-heading: 'Fraunces', Georgia, serif;
}

/* Warm page background. !important overrides base.html's bg-white utility;
   safe — this file loads only on public pages.
   PHASE 2 CLEANUP: base.html has no {% block body_class %}; add one and apply
   a .public-page class from public_base.html to drop this !important. */
body {
  background-color: var(--color-bg-warm) !important;
}

/* Alternating section band */
.section-alt {
  background-color: var(--color-bg-section);
}

/* --- Headings — Fraunces serif --- */
.heading-serif {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
}
.hero-title {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.section-title {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-weight: 600;
}

/* --- Accent red focus/hover ring for accent buttons (2px gap + 2px ring) --- */
.btn-accent-ring {
  transition: box-shadow 150ms ease;
}
.btn-accent-ring:hover,
.btn-accent-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-bg-warm),
              0 0 0 4px var(--color-accent-red-ring);
}

/* --- Accent link hover --- */
.link-accent:hover,
.link-accent:focus-visible {
  color: var(--color-accent-red);
}