:root {
  /* base background */
  --off-black: hsl(0, 0%, 9%);    
  --dark-surface: hsl(220, 14%, 12%);
  --elevated-surface: hsl(220, 15%, 20%);
  --divider: hsl(220, 13%, 25%);

  /* text colours */
  --text-primary: hsl(0, 0%, 88%);
  --text-secondary: hsl(215, 14%, 65%);
  --text-heading: hsl(0, 0%, 100%);

  /* brand colours */
  --color-primary: hsl(250.1, 100%, 69.6%);
  --color-accent: hsl(45, 85%, 60%);
}

/* ----------- CUSTOM SCROLLBAR ----------- */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  background: rgba(126, 100, 255, 0.4); /* --main-color with 40% opacity */
  border-radius: 8px;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active { 
  background: rgba(126, 100, 255, 0.8); /* more solid on hover */
}

/* ----------- BASE STYLES ----------- */
*, *::before, *::after {
  transition: 
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

body {
  font-family: 'DM Sans', sans-serif;
  background-color: var(--off-black);
  color: var(--text-primary);
  overflow-x: hidden; /* hide horizontal scrollbar(s) */
}

h1, h2, h3, h4, h5, h6, label {
  font-family: 'DM Sans', serif;
}

p, span, figcaption {
  font-family: 'Merriweather', sans-serif;
}

/* ----------- LIGHT THEME OVERRIDES ----------- */
/* navbar */
[data-theme="light"] .custom-navbar {
  background-color: hsla(0, 0%, 0%, 0.5) !important;
  border-bottom: 1px solid hsl(0, 0%, 9%);
}
[data-theme="light"] .navbar-brand {
  color: hsl(0, 0%, 88%) !important;
}

/* home page */
[data-theme="light"] #homePage .btn-outline-custom {
  color: hsl(0, 0%, 88%) !important;
}
[data-theme="light"] #homePage .btn-outline-custom:hover {
  color: hsl(0, 0%, 0%) !important;
}

[data-theme="light"] #hero-section {
  --text-primary: hsl(0, 0%, 20%) !important;
  --text-heading: hsl(0, 0%, 10%) !important;
}

[data-theme="light"] #hero-section .text-primary,
[data-theme="light"] #hero-section .text-primary,
[data-theme="light"] #audience-section .text-primary,
[data-theme="light"] #audience-section .text-heading {
  color: hsl(0, 0%, 88%) !important;
}

[data-theme="light"] #homePage .timeline-tags .badge {
  border-color: hsl(0, 0%, 0%) !important;
  color: hsl(0, 0%, 0%) !important;
}

/* articles page */
[data-theme="light"] .quick-links-wrapper .row .col svg { fill: black; }
[data-theme="light"] .quick-links-wrapper .row:hover svg { fill: var(--color-accent); }
[data-theme="light"] .quick-links-wrapper .row:hover h3 { color: hsl(0, 0%, 88%) !important; }

/* form page */
[data-theme="light"] #feedbackForm .text-primary { color: hsl(0, 0%, 88%) !important; }
[data-theme="light"] #feedbackForm .form-select { color: hsl(0, 0%, 0%) !important; }
[data-theme="light"] #feedbackForm .form-control { color: hsl(0, 0%, 0%) !important;}
[data-theme="light"] #feedbackForm  textarea { color: hsl(0, 0%, 0%) !important;}
[data-theme="light"] #feedbackForm .character-counter { color: hsl(0, 0%, 88%) !important;}
[data-theme="light"] #feedbackForm .form-check-input:checked { background-color: var(--color-primary) !important; }

/* ----------- BOOTSTRAP UTILS ----------- */
.text-heading { color: var(--text-heading) !important; }
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.bg-main { background-color: var(--dark-surface) !important; }
.bg-secondary { background-color: var(--elevated-surface) !important; }
.bg-black { background-color: var(--off-black) !important; }

/* ----------- CUSTOM CSS FOR BOOTSTRAP ----------- */
/* CUSTOM-COLOURED BUTTONS */
.btn-purple {
  padding: 0.6em 0.8em;
  font-size: 1.1rem;
  background: var(--color-primary);
  color: var(--text-primary);
  border-radius: 8px;
}

.btn-outline-custom {
  padding: 0.6em 0.8em;
  font-size: 1.1rem;
  border: solid var(--divider);
  border-radius: 8px;
  color: var(--text-secondary);
  box-shadow: 5px 5px 32px rgba(0, 0, 0, 0.5);
  transition: all 0.2s ease;
}

.btn-outline-custom:hover,
.btn-outline-custom:focus-visible {
  background-color: var(--divider);
  color: var(--text-primary);
}

/* GLOWING BTNS */
.glowing-btn {
  padding: 0.6em 0.8em;
  font-size: 1.1rem;
  border-radius: 8px;
  background-color: var(--color-primary);
  color: var(--text-primary);
  box-shadow: 5px 5px 32px rgba(0, 0, 0, 0.5);
  transition: 0.2s ease;
}

.glowing-btn:hover,
.glowing-btn:focus-visible {
  color: var(--off-black);
  background: var(--color-accent);
  box-shadow: 0 0 32px hsl(from var(--color-accent) h s 50%);
}

/* FADE IN ANIMATION CSS */
.fade-in {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.fade-in.visible { opacity: 1; }

/* on MD breakpoint and below, make "Join the Conversation" btn white colour text for better contrast */
@media (max-width: 768px) {
  .btn-outline-custom {
    color: var(--text-primary) !important;
  }
}