:root {
  --primary-bg-color: #FFF8EF; /* Cream */
  --text-color: #353334;      /* Light Black */
  --primary-header-font: "Gasoek One", sans-serif;
  --primary-body-font: "Libre Caslon Display", serif;
  --primary-accent-font: "Limelight", sans-serif;
  --primary-pink: #ff9491;
  --primary-yellow: #FFC545;
  --primary-blue: #A5DCFF;
  --green-color: #798B5C;
  --black-color: #353334;
  --primary-pink-dark: #E18582;
  --primary-yellow-dark: #d4a43b;
  --primary-blue-dark: #7bb0d1;
  --green-color-dark: #5e6f45;
}

.dropdown {
  position: relative;      /* Anchor for absolute positioning */
}

.dropdown-content {
  display: none;           /* Hidden by default */
  position: absolute;      /* Positioned relative to .dropdown */
}

.dropdown.is-open .dropdown-content {
  display: block;          /* Shown on click */
}

[data-theme="light"] {
  --primary-bg-color: #FFF8EF;
  --black-color: #353334;
  --background-color: var(--primary-bg-color);
  --text-color: var(--black-color);
  --accent-pink: var(--primary-pink);
  --accent-blue: var(--primary-blue);
  --accent-yellow: var(--primary-yellow);
}


/* Dark mode  */
[data-theme="dark"] {
  --primary-bg-color: #353334;
  --black-color: #FFF8EF;
  --background-color: var(--primary-bg-color);
  --text-color: var(--black-color);
  --primary-pink: var(--primary-pink-dark);
  --primary-blue: var(--primary-blue-dark);
  --primary-yellow: var(--primary-yellow-dark); 
  --hero-texture: none;
}

body {
  background-color: var(--primary-bg-color);
  color: var(--text-color);
  font-family: var(--primary-body-font);
}