@charset "utf-8";

.business,
:is(.government, .resident, .visitor) .business,
:is(.government, .resident, .visitor) .business * {
  --color-1: var(--green-1);
  --color-2: var(--green-2);
  --color-3: var(--green-3);
  --color-4: var(--green-4);
  --color-5: var(--green-5);
  --color-6: var(--green-6);
  --color-7: var(--green-7);
  --color-8: var(--green-8);
  --color-9: var(--green-9);
}

.government,
:is(.business, .resident, .visitor) .government,
:is(.business, .resident, .visitor) .government * {
  --color-1: var(--blue-1);
  --color-2: var(--blue-2);
  --color-3: var(--blue-3);
  --color-4: var(--blue-4);
  --color-5: var(--blue-5);
  --color-6: var(--blue-6);
  --color-7: var(--blue-7);
  --color-8: var(--blue-8);
  --color-9: var(--blue-9);
}

/* Duplicate .resident removed from selector list */
.business .resident,
.government .resident,
.visitor .resident,
.business .resident *,
.government .resident *,
.visitor .resident *,
.resident {
  --color-1: var(--red-orange-1);
  --color-2: var(--red-orange-2);
  --color-3: var(--red-orange-3);
  --color-4: var(--red-orange-4);
  --color-5: var(--red-orange-5);
  --color-6: var(--red-orange-6);
  --color-7: var(--red-orange-7);
  --color-8: var(--red-orange-8);
  --color-9: var(--red-orange-9);
}

/* Duplicate .visitor removed from selector list */
.business .visitor,
.government .visitor,
.resident .visitor,
.business .visitor *,
.government .visitor *,
.resident .visitor *,
.visitor * {
  --color-1: var(--yellow-1);
  --color-2: var(--yellow-2);
  --color-3: var(--yellow-3);
  --color-4: var(--yellow-4);
  --color-5: var(--yellow-5);
  --color-6: var(--yellow-6);
  --color-7: var(--yellow-7);
  --color-8: var(--yellow-8);
  --color-9: var(--yellow-9);
}

/* NOTE: .admin intentionally maps to green palette (not the purple --admin vars in :root) */
/* Duplicate .admin removed from selector list */
.business .admin,
.government .admin,
.resident .admin,
.visitor .admin,
.business .admin *,
.government .admin *,
.resident .admin *,
.visitor .admin *,
.admin {
  --color-1: var(--green-1);
  --color-2: var(--green-2);
  --color-3: var(--green-3);
  --color-4: var(--green-4);
  --color-5: var(--green-5);
  --color-6: var(--green-6);
  --color-7: var(--green-7);
  --color-8: var(--green-8);
  --color-9: var(--green-9);
}

.dark {
  --compare: var(--gray-dark);
  --compare-less: var(--gray-med);
  --compare-more: var(--darkest);
  --contrast: var(--gray-off-white);
  --contrast-less: var(--gray-lt);
  --contrast-more: var(--lightest);
}

.light {
  --compare: var(--gray-off-white);
  --compare-less: var(--gray-lt);
  --compare-more: var(--lightest);
  --contrast: var(--gray-dark);
  --contrast-less: var(--gray-med);
  --contrast-more: var(--darkest);
}

.dark .light *,
.dark .light,
.light *,
.light {
  --bg-color: var(--lightest);
}

.light .dark *,
.light .dark,
.dark *,
.dark {
  --bg-color: var(--color-9);
}
main
button {
  background: var(--compare);

  &:hover {
    background: var(--compare-less);
  }
}

input {
  color: var(--contrast);
}