/* ==========================================================================
   FOG DESIGN SYSTEM — "GROVE-FOG" TOKENS
   Friends of God Foundation · UI overhaul 2026
   --------------------------------------------------------------------------
   Brand source: the interlocking-hearts logo → royal blue #004090 +
   mustard gold #D0B028. System: warm ivory paper, navy ink, rounded Grove
   geometry (Sora display + Plus Jakarta Sans body), 4px spacing grid,
   soft navy-tinted shadows, WCAG-AA pairings, light + dark themes.

   Loaded on BOTH surfaces (public + admin) AFTER the legacy stylesheets.
   It also REMAPS the legacy CSS custom properties (--navy, --gold,
   --primary-color, --gray-*, --success-*, …) so older templates recolor
   automatically — no template rewrites required.
   ========================================================================== */

/* ----------------------------- LIGHT THEME ----------------------------- */
:root {
  /* Brand */
  --fog-ink: #06264A;              /* deepest navy — headlines, rails, footer */
  --fog-primary: #004090;          /* logo royal blue */
  --fog-primary-strong: #00336F;
  --fog-primary-bright: #3A75C4;
  --fog-primary-soft: #E4EDF9;
  --fog-gold: #D0B028;             /* logo mustard gold */
  --fog-gold-strong: #A98F12;
  --fog-gold-ink: #7A6607;         /* accessible gold for text on light */
  --fog-gold-soft: #FAF3D4;

  /* Neutrals (warm ivory paper) */
  --fog-paper: #FAF8F1;
  --fog-surface: #FFFFFF;
  --fog-surface-2: #F4F1E7;
  --fog-line: #E7E2D3;
  --fog-line-strong: #CFC8AE;
  --fog-text: #16283C;
  --fog-text-muted: #55647A;
  --fog-text-faint: #64748B;  /* ≥4.5:1 on paper — AA for small text */

  /* Semantic */
  --fog-success: #1F7A4D; --fog-success-soft: #E4F3EB; --fog-success-line: #BFE0CF;
  --fog-warning: #B45309; --fog-warning-soft: #FBEEE0; --fog-warning-line: #EBD3B3;
  --fog-danger:  #B42318; --fog-danger-soft:  #FBE9E7; --fog-danger-line:  #EFC6C0;
  --fog-info:    #0B6FA8; --fog-info-soft:    #E3F0F8; --fog-info-line:    #C2DEEE;

  /* Spacing scale (4 / 8 / 12 / 16 / 24 / 32 / 48 / 64) */
  --fog-sp-1: 4px;  --fog-sp-2: 8px;  --fog-sp-3: 12px; --fog-sp-4: 16px;
  --fog-sp-6: 24px; --fog-sp-8: 32px; --fog-sp-12: 48px; --fog-sp-16: 64px;

  /* Radii */
  --fog-r-sm: 10px; --fog-r-md: 16px; --fog-r-lg: 22px; --fog-r-pill: 999px;

  /* Shadows (soft, navy-tinted) */
  --fog-sh-1: 0 1px 3px rgba(6, 38, 74, .07);
  --fog-sh-2: 0 6px 20px rgba(6, 38, 74, .10);
  --fog-sh-3: 0 20px 48px rgba(6, 38, 74, .16);

  /* Type */
  --fog-font-display: 'Sora', 'Toroka Wide', Georgia, serif;
  --fog-font-body: 'Plus Jakarta Sans', 'Toroka Normal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Motion */
  --fog-ease: cubic-bezier(.2, .7, .3, 1);

}

/* ==========================================================================
   LEGACY VARIABLE REMAP — older stylesheets keep working, new palette wins
   ========================================================================== */
:root {
  /* global.css / home.css / footer brand vars */
  --gold: var(--fog-gold);
  --navy: var(--fog-primary);
  --navy-dark: var(--fog-primary-strong);
  --navy-light: var(--fog-primary-bright);
  --white: var(--fog-surface);
  --off-white: var(--fog-paper);
  --gray-light: var(--fog-line);
  --gray: var(--fog-text-muted);
  --gray-dark: var(--fog-text);
  --light-gray: var(--fog-line);
  --medium-gray: var(--fog-text-muted);
  --dark-gray: var(--fog-text);
  --success: var(--fog-success);
  --warning: var(--fog-warning);
  --error: var(--fog-danger);
  --info: var(--fog-info);

  /* admin-global.css ramps (gray + semantic) */
  --gray-50: var(--fog-paper);
  --gray-100: var(--fog-surface-2);
  --gray-200: var(--fog-line);
  --gray-300: var(--fog-line-strong);
  --gray-400: var(--fog-text-faint);
  --gray-500: var(--fog-text-muted);
  --gray-600: var(--fog-text-muted);
  --gray-700: var(--fog-text);
  --gray-800: var(--fog-text);
  --gray-900: #0B1B2E;
  --gray-950: #060F1A;

  --success-50: var(--fog-success-soft); --success-100: var(--fog-success-soft);
  --success-200: var(--fog-success-line); --success-300: var(--fog-success-line);
  --success-400: var(--fog-success); --success-500: var(--fog-success);
  --success-600: var(--fog-success); --success-700: var(--fog-success);
  --success-800: var(--fog-success); --success-900: var(--fog-success);

  --warning-50: var(--fog-warning-soft); --warning-100: var(--fog-warning-soft);
  --warning-200: var(--fog-warning-line); --warning-300: var(--fog-warning-line);
  --warning-400: var(--fog-warning); --warning-500: var(--fog-warning);
  --warning-600: var(--fog-warning); --warning-700: var(--fog-warning);
  --warning-800: var(--fog-warning); --warning-900: var(--fog-warning);

  --error-50: var(--fog-danger-soft); --error-100: var(--fog-danger-soft);
  --error-200: var(--fog-danger-line); --error-300: var(--fog-danger-line);
  --error-400: var(--fog-danger); --error-500: var(--fog-danger);
  --error-600: var(--fog-danger); --error-700: var(--fog-danger);
  --error-800: var(--fog-danger); --error-900: var(--fog-danger);

  --info-50: var(--fog-info-soft); --info-100: var(--fog-info-soft);
  --info-200: var(--fog-info-line); --info-300: var(--fog-info-line);
  --info-400: var(--fog-info); --info-500: var(--fog-info);
  --info-600: var(--fog-info); --info-700: var(--fog-info);
  --info-800: var(--fog-info); --info-900: var(--fog-info);

  /* gold family (admin-global) */
  --gold-light: #E3CC63;
  --gold-dark: var(--fog-gold-strong);
  --gold-10: rgba(208, 176, 40, .12);
  --gold-20: rgba(208, 176, 40, .22);
  --gold-30: rgba(208, 176, 40, .34);
  --navy-blue: var(--fog-primary);
  --navy-10: rgba(0, 64, 144, .10);
  --navy-20: rgba(0, 64, 144, .20);
  --navy-30: rgba(0, 64, 144, .32);

  /* admin primary color used across controllers/views */
  --primary-color: var(--fog-primary);
  --primary-dark: var(--fog-primary-strong);
  --primary-light: var(--fog-primary-bright);

  /* typography + geometry vars */
  --heading-font: var(--fog-font-display);
  --body-font: var(--fog-font-body);
  --font-heading: var(--fog-font-display);
  --font-body: var(--fog-font-body);
  --radius-sm: var(--fog-r-sm);
  --radius-md: var(--fog-r-md);
  --radius-lg: var(--fog-r-lg);
  --radius-xl: 28px;
  --radius-full: var(--fog-r-pill);
  --shadow-sm: var(--fog-sh-1);
  --shadow-md: var(--fog-sh-2);
  --shadow-lg: var(--fog-sh-3);
  --shadow-gold: 0 6px 20px rgba(208, 176, 40, .28);

  /* admin header/footer semantic vars */
  --header-bg: var(--fog-surface);
  --header-border: var(--fog-line);
  --header-text: var(--fog-ink);
  --header-text-secondary: var(--fog-text-muted);
  --header-hover-bg: var(--fog-primary-soft);
  --dropdown-bg: var(--fog-surface);
  --dropdown-border: var(--fog-line);
  --dropdown-shadow: var(--fog-sh-2);
  --footer-bg: #06264A;
  --footer-text: rgba(255, 255, 255, .85);
  --footer-text-light: rgba(255, 255, 255, .62);
  --footer-border: rgba(255, 255, 255, .14);
  --footer-hover-bg: rgba(255, 255, 255, .08);
  --dashboard-header-gradient: linear-gradient(130deg, #06264A 0%, #004090 100%);
  --stat-card-gradient-pending: linear-gradient(90deg, var(--fog-warning), #D97706);
  --stat-card-gradient-donations: linear-gradient(90deg, #2F9E6B, var(--fog-success));
  --stat-card-gradient-programs: linear-gradient(90deg, var(--fog-info), #0B84C4);
  --stat-card-gradient-volunteers: linear-gradient(90deg, var(--fog-gold), #E3CC63);
}

/* ==========================================================================
   BASE
   ========================================================================== */
body {
  background-color: var(--fog-paper);
  color: var(--fog-text);
  font-family: var(--fog-font-body);
  line-height: 1.6;
  transition: background-color .25s var(--fog-ease), color .25s var(--fog-ease);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fog-font-display);
  color: var(--fog-ink);
  letter-spacing: -.02em;
  line-height: 1.18;
}
::selection { background: var(--fog-gold); color: #06264A; }

:focus-visible {
  outline: 3px solid var(--fog-gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Slim, themed scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--fog-line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--fog-line-strong); border-radius: 8px; border: 3px solid var(--fog-paper); }
*::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================================
   CUSTOM ICON FAMILY (Grove-FOG) — rendered by fog_icon() / fog-icons.js
   ========================================================================== */
.fog-i {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.14em;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.fog-i .tint { fill: currentColor; opacity: .13; stroke: none; }
.fog-i .acc  { stroke: var(--fog-gold-ink); }
.fog-i .dot  { fill: currentColor; stroke: none; }
/* gold pops on dark surfaces; deep gold keeps AA on light ones */
.fog-ic { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.fog-fw { width: 1.25em; }
.fog-spin { animation: fog-spin 1s linear infinite; }
@keyframes fog-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .fog-spin { animation-duration: 2.4s; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ==========================================================================
   SHARED COMPONENT PRIMITIVES (available to new + legacy markup)
   ========================================================================== */

/* Buttons ---------------------------------------------------------------- */
.btn, button.btn, a.btn, input[type="submit"], input[type="button"] {
  font-family: var(--fog-font-body);
  font-weight: 700;
  border-radius: var(--fog-r-pill);
  transition: transform .18s var(--fog-ease), box-shadow .18s var(--fog-ease),
              background-color .18s var(--fog-ease), color .18s var(--fog-ease),
              border-color .18s var(--fog-ease);
}
.btn:hover, input[type="submit"]:hover { transform: translateY(-2px); }
.btn:active, input[type="submit"]:active { transform: translateY(0); }
.btn-gold, .btn-primary {
  box-shadow: 0 6px 16px rgba(0, 64, 144, .28);
}

/* Form controls ---------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="date"], input[type="url"], input[type="search"],
select, textarea {
  font-family: var(--fog-font-body);
  color: var(--fog-text);
  background-color: var(--fog-surface);
  border: 1.5px solid var(--fog-line-strong);
  border-radius: var(--fog-r-sm);
  transition: border-color .18s var(--fog-ease), box-shadow .18s var(--fog-ease), background-color .18s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--fog-primary);
  box-shadow: 0 0 0 4px var(--fog-primary-soft);
}
input::placeholder, textarea::placeholder { color: var(--fog-text-faint); }

/* Tables ------------------------------------------------------------------ */
table { border-color: var(--fog-line); }
table th { color: var(--fog-text-faint); }

/* Badges / status chips ---------------------------------------------------- */
.badge, .status-badge, .chip {
  border-radius: var(--fog-r-pill);
  font-weight: 700;
}

/* Alerts ------------------------------------------------------------------- */
.alert, .notification, .flash-message {
  border-radius: var(--fog-r-md);
}

/* Cards / panels ------------------------------------------------------------ */
.card, .panel, .stat-card, .dashboard-card {
  border-radius: var(--fog-r-md);
}

/* Empty state ---------------------------------------------------------------- */
.fog-empty {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--fog-sp-2);
  padding: var(--fog-sp-12) var(--fog-sp-6);
}
.fog-empty .fog-empty-art {
  width: 92px; height: 92px;
  display: grid; place-items: center;
  border-radius: 30px;
  background: var(--fog-gold-soft);
  border: 2px dashed var(--fog-gold);
  color: var(--fog-gold-ink);
  font-size: 40px;
  margin-bottom: var(--fog-sp-2);
}
.fog-empty h3, .fog-empty h4 { font-size: 1.1rem; }
.fog-empty p { color: var(--fog-text-muted); max-width: 340px; font-size: .9rem; }

/* Loading skeleton ----------------------------------------------------------- */
.fog-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--fog-surface-2);
  border-radius: var(--fog-r-sm);
}
.fog-skeleton::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: fog-shimmer 1.4s infinite;
}
@keyframes fog-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Utility ---------------------------------------------------------------------- */
.fog-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}