/* Brand overrides (now variable-driven) */
:root {
  /*
   Palette Mix Approximations (replacing prior color-mix usage)
   Updated Primary base (#e07b46) darkened toward black (approximate):
    92% #d97140, 90% #d36b3b, 88% #c86539, 85% #be5f35, 80% #b15631,
     75% #a34d2d, 70% #954428, 60% #7a3620, 55% #6e301d, 45% #582519,
     35% #431c14, 28% #371710 (focus ring), 25% #2f140e.
   Secondary base (#f4e8dd) darken approximations retained:
     92% #E0D5CB, 90% #DDD0C6, 88% #D6CCC2, 85% #CFC5BB, 80% #C3B9B0,
     75% #B7AEA5, 70% #ABA29B, 65% #9E968F, 30% #494542, 15% #242221.
   Use these for legacy fallbacks where dynamic mixing unavailable; prefer CSS vars.
  */
  /* Fallback brand colors extracted from logo (cathyoma.png) */
  --brand-primary: #e07b46;
  /* updated primary (Nov 29 2025) */
  --brand-secondary: #f4e8dd;
  --brand-accent: #aca195;
  --brand-gradient: linear-gradient(135deg, #e07b46 0%, #f4e8dd 100%);
  --brand-primary-alt: #d36b3b;
  /* darker alt for small text & HC mode */
  /* Text contrast helpers */
  --brand-text: #2b2b2b;
  --brand-on-primary: #ffffff;
  /* primary is dark; prefer light text */
  --brand-on-secondary: #2b2b2b;
  /* secondary is very light; prefer dark text */
  /* Additional palette colors for future use */
  --brand-light: #f0e0d0;
  --brand-lightest: #f4e8dd;
  --brand-neutral: #e8e0e0;
  --brand-warm: #e8c8b0;
  --brand-dark: #e0a890;
  --brand-darker: #aca195;
  /* Surface tokens */
  --brand-surface: #ffffff;
  --brand-surface-alt: #e0d5cb;
  /* approx 92% secondary + 8% black */
  --brand-on-surface: #2b2b2b;
}

.logo {
  font-weight: 700;
  letter-spacing: 0.2px;
}

.logo-img,
.admin-logo {
  max-height: 56px;
  width: auto;
  display: inline-block;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.logo-img:hover,
.admin-logo:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 24px rgba(232, 200, 184, 0.18);
}

.navbar-brand,
.logo {
  color: var(--brand-primary) !important;
}

/* Ensure readable logo/brand text on primary-colored header */
.site-nav .navbar-brand,
.site-nav .logo {
  color: var(--brand-on-primary) !important;
}

.site-footer h3 {
  color: var(--brand-secondary);
}

.btn-primary {
  /* Unified brand button tokens (synchronized with style.css) */
  --bs-btn-color: var(--brand-on-primary);
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary-dk-10);
  --bs-btn-hover-color: var(--brand-on-primary);
  --bs-btn-hover-bg: var(--brand-primary-dk-10);
  --bs-btn-hover-border-color: var(--brand-primary-dk-15);
  --bs-btn-active-color: var(--brand-on-primary);
  --bs-btn-active-bg: var(--brand-primary-dk-20);
  --bs-btn-active-border-color: var(--brand-primary-dk-30);
  --bs-btn-disabled-color: var(--brand-on-primary);
  --bs-btn-disabled-bg: var(--brand-primary-dk-5);
  --bs-btn-disabled-border-color: var(--brand-primary-dk-10);
  color: var(--brand-on-primary);
  background-color: var(--brand-primary);
  border-color: var(--brand-primary-dk-10);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.btn-primary:hover {
  color: var(--brand-on-primary);
  background-color: var(--brand-primary-dk-10);
  border-color: var(--brand-primary-dk-15);
}

.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show>.btn-primary.dropdown-toggle {
  color: var(--brand-on-primary);
  background-color: var(--brand-primary-dk-20);
  border-color: var(--brand-primary-dk-30);
}

.btn-primary:focus,
.btn-primary:active:focus,
.btn-primary.active:focus,
.show>.btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem var(--brand-primary-dk-30);
}

.btn-primary:disabled,
.btn-primary.disabled {
  color: var(--brand-on-primary);
  background-color: var(--brand-primary-dk-5);
  border-color: var(--brand-primary-dk-10);
}

/* Outline primary button (compat fallbacks) */
.btn-outline-primary {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
  /* fallback */
  /* modern */
  border-color: #c5aa9c;
  /* ~85% mix approximation replacing color-mix */
}

.btn-outline-primary:hover {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-on-primary);
}

a {
  --link-color: var(--brand-primary);
}

a:hover {
  color: var(--brand-primary);
  filter: brightness(0.9);
}

.badge-primary,
.bg-brand-primary {
  background: var(--brand-primary) !important;
  color: var(--brand-on-primary) !important;
}

.bg-brand-secondary {
  background: var(--brand-secondary) !important;
  color: var(--brand-on-secondary) !important;
}

.text-brand-primary {
  /* Global unified outline converted to token-driven filled-on-interaction */
  --bs-btn-color: var(--brand-on-primary);
  --bs-btn-border-color: var(--brand-primary-dk-10);
  --bs-btn-hover-color: var(--brand-on-primary);
  --bs-btn-hover-bg: var(--brand-primary-dk-10);
  --bs-btn-hover-border-color: var(--brand-primary-dk-15);
  --bs-btn-active-color: var(--brand-on-primary);
  --bs-btn-active-bg: var(--brand-primary-dk-20);
  --bs-btn-active-border-color: var(--brand-primary-dk-30);
  --bs-btn-disabled-color: var(--brand-on-primary);
  --bs-btn-disabled-bg: var(--brand-primary-dk-5);
  --bs-btn-disabled-border-color: var(--brand-primary-dk-10);
  color: var(--brand-on-primary);
  background-color: transparent;
  border-color: var(--brand-primary-dk-10);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
  color: var(--brand-secondary) !important;
}

color: var(--brand-on-primary);
background-color: var(--brand-primary-dk-10);
border-color: var(--brand-primary-dk-15);
color: var(--brand-text);
}

/* Footer accent underline example */
.site-footer .links a:hover {
  text-decoration: underline;
  color: var(--brand-on-primary);
  background-color: var(--brand-primary-dk-20);
  border-color: var(--brand-primary-dk-30);
}

/* Utility classes (added Nov 29 2025) */
.btn-brand {
  /* Standardized brand button states (Nov 29 2025) */
  --bs-btn-color: var(--brand-on-primary);
  box-shadow: 0 0 0 0.25rem var(--brand-primary-dk-30);
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary-dk-10);
  --bs-btn-hover-color: var(--brand-on-primary);
  --bs-btn-hover-bg: var(--brand-primary-dk-10);
  color: var(--brand-on-primary);
  background-color: var(--brand-primary-dk-5);
  border-color: var(--brand-primary-dk-10);
  opacity: .65;
  --bs-btn-hover-border-color: var(--brand-primary-dk-15);
  --bs-btn-active-color: var(--brand-on-primary);
  --bs-btn-active-bg: var(--brand-primary-dk-20);
  --bs-btn-active-border-color: var(--brand-primary-dk-30);
  --bs-btn-disabled-color: var(--brand-on-primary);
  --bs-btn-disabled-bg: var(--brand-primary-dk-5);
  --bs-btn-disabled-border-color: var(--brand-primary-dk-10);
  color: var(--brand-on-primary);
  background-color: var(--brand-primary);
  border-color: var(--brand-primary-dk-10);
}

.btn-brand:hover {
  color: var(--brand-on-primary);
  background-color: var(--brand-primary-dk-10);
  border-color: var(--brand-primary-dk-15);
}

.btn-brand:focus {
  color: var(--brand-on-primary);
  background-color: var(--brand-primary-dk-10);
  border-color: var(--brand-primary-dk-15);
  box-shadow: 0 0 0 0.25rem var(--brand-primary-dk-30);
}

.btn-brand:active,
.btn-brand.active,
.show>.btn-brand.dropdown-toggle {
  color: var(--brand-on-primary);
  background-color: var(--brand-primary-dk-20);
  border-color: var(--brand-primary-dk-30);
}

.btn-brand:active:focus,
.btn-brand.active:focus,
.show>.btn-brand.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem var(--brand-primary-dk-30);
}

.btn-brand:disabled,
.btn-brand.disabled {
  color: var(--brand-on-primary);
  background-color: var(--brand-primary-dk-5);
  border-color: var(--brand-primary-dk-10);
  opacity: 0.65;
}

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

.bg-brand-gradient {
  background: var(--brand-gradient) !important;
  color: var(--brand-on-primary);
}

.text-on-primary {
  color: var(--brand-on-primary) !important;
}

/* Alt primary background utility */
.bg-brand-primary-alt {
  background: var(--brand-primary-alt) !important;
  color: var(--brand-on-primary);
}

/* High contrast preference: use alt token for stronger contrast on primary surfaces */
@media (prefers-contrast: more) {

  .btn-brand,
  .bg-brand-primary,
  .badge-primary,
  .bg-brand-gradient {
    background-color: var(--brand-primary-alt) !important;
    background-image: none !important;
  }
}