/* Define the harmonious color palette as CSS custom properties */
:root {
  /* Base and tonal variations in the same family */
  --color-1:  #290d24;  /* Base dark purple */
  --color-2:  #3a132a;
  --color-3:  #4b192f;
  --color-4:  #5c1f34;
  --color-5:  #6d2539;
  --color-6:  #7e2b3e;
  --color-7:  #8f3243;
  --color-8:  #a03948;
  --color-9:  #b1404d;
  --color-10: #c24752;
  --color-11: #d24e57;
  --color-12: #e1555c;
  --color-13: #f15c61;
  
  /* Incorporate pure white and pure black */
  --color-14: #ffffff;  /* White */
  --color-15: #000000;  /* Black */
  
  /* Additional harmonious accents (a few cooler/darker analogs) */
  --color-16: #291b3a;
  --color-17: #392343;
  --color-18: #48344f;
  --color-19: #58475b;
  --color-20: #695867;
}

/* Base element styles using the harmonious palette */
body {
  font-family: sans-serif;
  background-color: var(--color-14);  /* White background */
  color: var(--color-1);              /* Base color (#290d24) for general text */
  margin: 0;
  padding: 20px;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-1);             /* Use the base dark purple for headings */
  margin: 0.5em 0;
}

p {
  line-height: 1.6;
  margin: 0.5em 0;
  color: var(--color-16);            /* A slightly cooler dark tone */
}

a {
  color: var(--color-13);            /* A lighter, vibrant tint */
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--color-12);
  text-decoration: underline;
}

/* A sample button style */
.button {
  display: inline-block;
  padding: 0.75em 1.5em;
  background-color: var(--color-5);
  color: var(--color-14);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: var(--color-6);
}

/* A sample card component */
.card {
  background-color: var(--color-2);
  color: var(--color-14);
  padding: 1em;
  margin: 1em 0;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Utility classes for applying background colors */
.bg-1  { background-color: var(--color-1); }
.bg-2  { background-color: var(--color-2); }
.bg-3  { background-color: var(--color-3); }
.bg-4  { background-color: var(--color-4); }
.bg-5  { background-color: var(--color-5); }
.bg-6  { background-color: var(--color-6); }
.bg-7  { background-color: var(--color-7); }
.bg-8  { background-color: var(--color-8); }
.bg-9  { background-color: var(--color-9); }
.bg-10 { background-color: var(--color-10); }
.bg-11 { background-color: var(--color-11); }
.bg-12 { background-color: var(--color-12); }
.bg-13 { background-color: var(--color-13); }
.bg-14 { background-color: var(--color-14); }
.bg-15 { background-color: var(--color-15); }
.bg-16 { background-color: var(--color-16); }
.bg-17 { background-color: var(--color-17); }
.bg-18 { background-color: var(--color-18); }
.bg-19 { background-color: var(--color-19); }
.bg-20 { background-color: var(--color-20); }

/* Utility classes for text colors */
.text-1  { color: var(--color-1); }
.text-2  { color: var(--color-2); }
.text-3  { color: var(--color-3); }
.text-4  { color: var(--color-4); }
.text-5  { color: var(--color-5); }
.text-6  { color: var(--color-6); }
.text-7  { color: var(--color-7); }
.text-8  { color: var(--color-8); }
.text-9  { color: var(--color-9); }
.text-10 { color: var(--color-10); }
.text-11 { color: var(--color-11); }
.text-12 { color: var(--color-12); }
.text-13 { color: var(--color-13); }
.text-14 { color: var(--color-14); }
.text-15 { color: var(--color-15); }
.text-16 { color: var(--color-16); }
.text-17 { color: var(--color-17); }
.text-18 { color: var(--color-18); }
.text-19 { color: var(--color-19); }
.text-20 { color: var(--color-20); }