/* =======================
   surfaces.css
   ======================= */

/* Color palette from :root */
:root {
  --maroon: #48000E;
  --powder_blue: #B4CBFF;
  --daffodil: #FFED9B;
  --maroon80: #662d38;
  --terracotta: #CD5804;
  --sky_blue_mid: #CFDDFF;
  --sky_blue_low: #E5ECFC;
  --butter_mid: #FFF7CF;
  --butter_low: #FCF8E5;
  --dark_grey: #151413;
  --grey: #4c4c4e;
}

/* =======================
   MAROON SURFACE
   ======================= */
.maroon {
  background-color: var(--maroon);
  color: var(--daffodil);
}

/* Text inside maroon */
.maroon *:not(.button), .maroon a:not(.button){
  color: var(--powder_blue);
}

.maroon p, .maroon span, .maroon li, .maroon label{
  color: var(--sky_blue_low)!important;
}

.maroon form input:not(.button), .maroon form textarea{
  color: var(--maroon)!important;
}

/* Links inside maroon */
.maroon a:not(.button) {
  color: var(--sky_blue_mid);
}
.maroon a:hover {
  color: var(--powder_blue);
}

/* =======================
   POWDER BLUE SURFACE
   ======================= */
.powder_blue {
  background-color: var(--powder_blue);
  color: var(--maroon);
}

.powder_blue h1, .powder_blue h2, .powder_blue h3, .powder_blue h4, .powder_blue h5, .powder_blue h6 {
  color: var(--maroon);
}

.powder_blue p, .powder_blue span, .powder_blue li {
  color: var(--maroon80);
}

.powder_blue a:not*(.button) {
  color: var(--maroon);
}
.powder_blue a:hover {
  color: var(--maroon);
}

/* =======================
   DAFFODIL SURFACE
   ======================= */
.daffodil {
  background-color: var(--daffodil);
  color: var(--maroon);
}

.daffodil h1, .daffodil h2, .daffodil h3, .daffodil h4, .daffodil h5, .daffodil h6 {
  color: var(--maroon);
}

.daffodil p, .daffodil span, .daffodil li {
  color: var(--maroon80);
}

/* =======================
   TERRACOTTA SURFACE
   ======================= */
.terracotta {
  background-color: var(--terracotta);
  color: var(--butter_mid);
}

.terracotta h1, .terracotta h2, .terracotta h3, .terracotta h4, .terracotta h5, .terracotta h6 {
  color: #fff;
}

.terracotta p, .terracotta span, .terracotta li {
  color: #fff;
}

.terracotta a {
  color: #fff;
}
.terracotta a:hover {
  color: var(--butter_low);
}
.terracotta .button{
  background-color: var(--maroon);
}
.terracotta .button:hover{
  background-color: var(--sky_blue_mid);
  color: var(--maroon);
}

/* =======================
   MAROON80 SURFACE
   ======================= */

.maroon80 {
  background-color: var(--maroon80);
  color: var(--daffodil);
}
.maroon80 *:not(.button) {
  color: #fff;
}
.maroon80 p, .maroon80 span, .maroon80 li {
  color: var(--butter_mid);
}
.maroon80 a {
  color: var(--sky_blue_mid);
}
.maroon80 a:hover {
  color: var(--powder_blue);
}


/* =======================
   SKY BLUE SURFACES
   ======================= */
.sky_blue_mid {
  background-color: var(--sky_blue_mid);
  color: var(--maroon);
}

.sky_blue_low {
  background-color: var(--sky_blue_low);
  color: var(--maroon);
}

/* =======================
   BUTTER SURFACES
   ======================= */
.butter_mid {
  background-color: var(--butter_mid);
  color: var(--maroon);
}

.butter_low {
  background-color: var(--butter_low);
  color: var(--maroon);
}

.butter_low *, .butter_low p a, .butter_low span, .butter_low li {
  color: var(--maroon80);
}

.butter_low .panel-body * {
  color: var(--maroon80);
}

.butter_low h1, .butter_low h2, .butter_low h3, .butter_low h4, .butter_low h5, .butter_low h6 {
  color: var(--maroon);
}

.butter_low .button{
  color: #fff;
}

.butter_low .button:hover{
  color: var(--maroon);
}

.dark_purple *, .mid_purple *{
  color: #fff;
}
.module.cta.purple, .stats-blobs .purple{
  background: var(--powder_blue);
}
.module.cta.purple *, .stats-blobs .purple *{
  color: var(--maroon);
}
.module.cta.purple .item:not(:nth-child(even)) .button i{
  color: #fff;
}