/* ==========================================================================
   Root Variables & Brand Colors
   ========================================================================== */
:root {
  --brand-gold: #C7964C;
  --brand-gold-hover: #D2A257;
  --discord-blurple: #5865F2;
  --discord-blurple-hover: #4752C4;
  --kofi-red: #FF5E5B;
  --kofi-red-hover: #E55552;

  /* Light Theme Quote Colors */
  --quote-bg: rgba(199, 150, 76, 0.08); /* Warm gold-tinted card */
  --quote-text: #1f2328;
  --quote-subtext: #636c76;
}

/* Dark Theme Overrides (Supports Bootstrap data-bs-theme="dark" and OS Dark Mode) */
[data-bs-theme="dark"] {
  --quote-bg: #1a1e24;
  --quote-text: #f0f6fc;
  --quote-subtext: #8b949e;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) {
    --quote-bg: #1a1e24;
    --quote-text: #f0f6fc;
    --quote-subtext: #8b949e;
  }
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
.text-gold {
  color: var(--brand-gold) !important;
}

.border-gold {
  border-color: var(--brand-gold) !important;
}

.border-gold-subtle {
  border-color: rgba(199, 150, 76, 0.25) !important;
}

/* ==========================================================================
   Typography & Headings
   ========================================================================== */
main h1, 
main h2, 
main h3 {
  color: var(--brand-gold);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

/* ==========================================================================
   Blockquotes (Theme-Adaptive Card)
   ========================================================================== */
main blockquote {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  background-color: var(--quote-bg);
  border-left: 4px solid var(--brand-gold);
  border-radius: 8px;
  overflow: hidden;
  transition: background-color 0.2s ease, color 0.2s ease;
}

main blockquote p {
  font-size: 1.1rem;
  color: var(--quote-text);
  margin-bottom: 0.5rem;
}

main blockquote p:last-child {
  margin-bottom: 0;
}

main blockquote footer,
main blockquote cite,
main blockquote em {
  font-size: 0.9rem;
  color: var(--quote-subtext);
}

/* ==========================================================================
   Custom Brand Buttons
   ========================================================================== */
/* Gold Outline Button */
.btn-outline-gold {
  color: var(--brand-gold);
  border-color: var(--brand-gold);
}

.btn-outline-gold:hover,
.btn-outline-gold:focus,
.btn-outline-gold:active {
  background-color: var(--brand-gold);
  border-color: var(--brand-gold);
  color: #0d1117;
}

/* Discord Button */
.btn-discord {
  background-color: var(--discord-blurple);
  color: #ffffff;
  border: none;
  transition: background-color 0.2s ease-in-out;
}

.btn-discord:hover,
.btn-discord:focus,
.btn-discord:active {
  background-color: var(--discord-blurple-hover);
  color: #ffffff;
}

/* Ko-fi Button */
.btn-kofi {
  background-color: var(--kofi-red);
  color: #ffffff;
  border: none;
  transition: background-color 0.2s ease-in-out;
}

.btn-kofi:hover,
.btn-kofi:focus,
.btn-kofi:active {
  background-color: var(--kofi-red-hover);
  color: #ffffff;
}

/* ==========================================================================
   Gold Badge / Pill Variants
   ========================================================================== */
/* Solid Gold Badge */
.text-bg-gold {
  background-color: var(--brand-gold) !important;
  color: #0d1117 !important; /* Dark text for high contrast */
}

/* Subtle / Soft Gold Badge */
.text-bg-gold-subtle {
  background-color: rgba(199, 150, 76, 0.15) !important;
  color: var(--brand-gold) !important;
  border: 1px solid rgba(199, 150, 76, 0.3);
}

/* ==========================================================================
   Gold Subtle Utility Classes
   ========================================================================== */
.bg-gold-subtle {
  background-color: rgba(199, 150, 76, 0.12) !important;
}

.border-gold-subtle {
  border-color: rgba(199, 150, 76, 0.3) !important;
}

/* Light mode text contrast */
.text-gold-emphasis {
  color: #8c6221 !important; /* Darker gold for readability on light backgrounds */
}

/* Dark mode text contrast */
[data-bs-theme="dark"] .text-gold-emphasis {
  color: #e5b871 !important; /* Lighter, warm gold for dark backgrounds */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) .text-gold-emphasis {
    color: #e5b871 !important;
  }
}