/**
 * TODO: Generate this with PHP based on theme colors.
 * We could even make an ACF options page with a repeater to define them all
 *
 */

:root {
  --theme-reset-color: #fff;
  --computing-theme-color: #01426a;
  --theme-active-color: #009cde;
  --theme-link-color: #006298;
  --theme-focus-color: #a5b9ff;
  --edge-theme-color: #509e2f;
  --theme-btn-color: #ffd100;
  --header-cta-color: #ffd100;
  --header-cta-background: #000;
  --theme-font-color: #231f20;
  --theme-footer-color: #737373;
  --theme-gray-dark: #54585a;
  --theme-gray-medium: #898d8d;
  --theme-gray-light: #c7c9c7;
  --theme-gray-lighter: #f2f2f2;
  --theme-muted-color: #f2f2f2;
  --theme-form-focus-color: #f5f5f5;
  --theme-footer-background: #f9f9f9;
  --header-nav-background: #fff;
}

.has-theme-reset-color-color { color: var(--theme-reset-color); }
.has-theme-active-color-color { color: var(--theme-active-color); }
.has-theme-focus-color-color { color: var(--theme-focus-color); }
.has-theme-font-color-color { color: var(--theme-font-color); }
.has-theme-footer-background-color { color: var(--theme-footer-background); }
.has-theme-footer-color-color { color: var(--theme-footer-color); }
.has-theme-form-focus-color-color { color: var(--theme-form-focus-color); }
.has-theme-link-color-color { color: var(--theme-link-color); }
.has-theme-gray-dark-color { color: var(--theme-gray-dark); }
.has-theme-gray-medium-color { color: var(--theme-gray-medium); }
.has-theme-gray-light-color { color: var(--theme-gray-light); }
.has-theme-gray-lighter-color { color: var(--theme-gray-lighter); }
.has-theme-muted-color-color { color: var(--theme-muted-color); }
.has-header-cta-background-color { color: var(--header-cta-background); }
.has-header-cta-color-color { color: var(--header-cta-color); }
.has-header-nav-background-color { color: var(--header-nav-background); }
.has-computing-theme-color-color { color: var(--computing-theme-color); }
.has-edge-theme-color-color { color: var(--edge-theme-color); }

.has-theme-reset-color-background-color { background-color: var(--theme-reset-color); }
.has-theme-active-color-background-color { background-color: var(--theme-active-color); }
.has-theme-focus-color-background-color { background-color: var(--theme-focus-color); }
.has-theme-font-color-background-color { background-color: var(--theme-font-color); }
.has-theme-footer-background-background-color { background-color: var(--theme-footer-background); }
.has-theme-footer-color-background-color { background-color: var(--theme-footer-color); }
.has-theme-form-focus-color-background-color { background-color: var(--theme-form-focus-color); }
.has-theme-link-color-background-color { background-color: var(--theme-link-color); }
.has-theme-gray-dark-background-color { background-color: var(--theme-gray-dark); }
.has-theme-gray-medium-background-color { background-color: var(--theme-gray-medium); }
.has-theme-gray-light-background-color { background-color: var(--theme-gray-light); }
.has-theme-gray-lighter-background-color { background-color: var(--theme-gray-lighter); }
.has-theme-muted-color-background-color { background-color: var(--theme-muted-color); }
.has-header-cta-background-background-color { background-color: var(--header-cta-background); }
.has-header-cta-color-background-color { background-color: var(--header-cta-color); }
.has-header-nav-background-background-color { background-color: var(--header-nav-background); }
.has-computing-theme-color-background-color { background-color: var(--computing-theme-color); }
.has-edge-theme-color-background-color { background-color: var(--edge-theme-color); }