:root {
  --color-primary: #48365c;
  --color-primary-hover: #462e92;
  --color-accent: #2b2d42;
  --color-white: #ffffff;
  --color-gray-light: #f2f2f6;
  --color-gray-dark: #555555;
  --color-text: #333333;
  --color-border: #ecedf0;
  --color-black: #000000;
  --color-input-border: #bed7d0;
  --color-overlay: rgba(0, 0, 0, 0.5);
}

/* Example of variable usage */
body {
  color: var(--color-black);
  background-color: var(--color-white);
}

/* Header */
.header {
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}
.header .item-right a {
  color: var(--color-gray-dark);
}
.header-demo-cta {
  background-color: var(--color-primary);
  color: var(--color-white) !important;
}
.header-demo-cta:hover {
  background-color: var(--color-primary-hover);
}
.header .menu > ul > li > a {
  color: var(--color-black);
}
.header .menu > ul > li:hover > a {
  color: var(--color-primary);
}

/* Main links */
a.primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}
a.primary:hover {
  background-color: var(--color-primary-hover);
}
a.secondary {
  border: 2px solid var(--color-accent);
  color: var(--color-black);
}
a.secondary:hover {
  border-color: var(--color-primary-hover);
}

/* Sections and backgrounds */
.bg-gray {
  background-color: var(--color-gray-light);
}
.bg-white {
  background-color: var(--color-white);
}
.brand-purple {
  background-color: var(--color-accent);
}
.primary-green{
  color: var(--color-primary);
}

/* Demo popup */
.demo-popup-container {
  background-color: var(--color-overlay);
}
.demo-popup {
  background-color: var(--color-white);
}
.demo-popup .input-field-container .input-element input {
  border: 1px solid var(--color-input-border);
}
.demo-popup form h4 {
  color: var(--color-primary);
}

/* Footer */
footer {
  border-top: 1px solid var(--color-border);
}
.footer-link-list li a {
  color: var(--color-text);
}
.footer-link-list li a:hover {
  text-decoration: underline;
}
.copyright-container {
  background-color: var(--color-gray-light);
}

/* Etc. */