html:root {
  /* Rex Brand Palette (lavender → indigo) */
  --blog-color-primary:     #BB8FCE;    /* soft lavender */
  --blog-color-secondary:   #6C3483;    /* deep purple */
  --highlight-rex:          #BB8FCE;
  --rex-indigo:             #9B59B6;
  --highlight-rex-dark:     #6C3483;
  --rex-indigo-light:       rgba(155,89,182,0.08);
  --highlight-rex-glow:     rgba(187,143,206,0.4);

  /* Shared tokens used in navbar/footer/Tarte/etc. */
  --color-primary:          var(--highlight-rex);
  --color-accent:           var(--highlight-rex-dark);
  --color-dark:             #111;
  --color-footer-bg:        #1b0c24;
  --color-footer-text:      #e6d1f3;
}

/* Primary button override */
.btn-primary {
  background-color: var(--blog-color-primary) !important;
  border-color: var(--blog-color-primary) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--highlight-rex-dark) !important;
  border-color: var(--highlight-rex-dark) !important;
  color: #fff !important;
}

/* Footer (optional styling to match brand tone) */
.footer-section {
  background-color: var(--color-footer-bg) !important;
  color: var(--color-footer-text) !important;
}
.footer-section a,
.footer-section .footer-link {
  color: var(--color-footer-text);
}
.footer-section a:hover {
  color: var(--blog-color-primary);
}

/* Optional: Light background for cards/boxes */
.card,
.highlight-box {
  background-color: var(--rex-indigo-light) !important;
}

/* Optional: glow effect on hover buttons */
.btn-primary:hover {
  box-shadow: 0 0 12px var(--highlight-rex-glow);
}

/* Ensure logo scales on all viewports */
.glass-nav .nav-logo {
  height: auto;
  width: auto;
  max-height: 32px;
  max-width: 100%;
  object-fit: contain;
  vertical-align: middle;
}

@media (max-width: 575px) {
  .glass-nav .nav-logo {
    max-height: 28px !important; /* smaller for mobile */
    height: auto !important;
    width: auto !important;
  }
}