ul.color-chip {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: Sofia-pro, sans-serif;
  margin: 1rem 0 2rem 0;
}

@media(min-width: 40rem) {
 .theme-tiger ul.color-chip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
  gap: 1rem;
  }
}

@media(min-width: 62rem) {
 .theme-tiger ul.color-chip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

ul.color-chip li {
  background: #efefef;
  padding: 1rem;
}

.theme-cosmic {
  --primary-100: #1c122e;
  --primary-90: #281b42;
  --primary-80: #432C72;
  --primary-20: #e8e3f1;
  --neutral-60: #7d8489;
  --neutral-20: #a6aeb4;
  --neutral-10: #e1e4e6;
  --neutral-05: #f5f6f6;
  --bright-medium: #5c43a8;
  --bright-light: #b39afd;
  --body: #121212;
}

.theme-terra {
  --primary-100: #04342A;
  --primary-90: #005040;
  --primary-80: #006450;
  --primary-20: #DCF3EF;
  --neutral-60: #8d7e6a;
  --neutral-20: #b8a791;
  --neutral-10: #E8E4D9;
  --neutral-05: #FCFBF8;
  --bright-medium: #00C08B;
  --bright-light: #c1e300;
    --body: #121212;
}

.theme-glacier {
  --primary-100: #042133;
  --primary-90: #063451;
  --primary-80: #084266;
  --primary-20: #edf9ff;
  --neutral-60: #828b97;
  --neutral-20: #bac7d8;
  --neutral-10: #e3e8ef;
  --neutral-05: #f8f9fb;
  --bright-medium: #03a9f4;
  --bright-light: #4ef1ff;
  --body: #121212;
}

.theme-luna {
  --primary-100: #121212;
  --primary-90: #1d1d1d;
  --primary-80: #414141;
  --primary-20: #FFF6E9;
  --neutral-60: #717171;
  --neutral-20: #d0d0d0;
  --neutral-10: #eeeeee;
  --neutral-05: #f7f7f7;
  --bright-medium: #f58025;
  --bright-light: #ff9e22;
  --body: #121212;
}

.theme-tiger {
  --bright-medium: #e77500;
  --bright-light: #f8efeb;
  --neutral-100: #121212;
  --neutral-90: #1d1d1d;
  --neutral-85: #333333;
  --neutral-80: #414141;
  --neutral-60: #717171;
  --neutral-40: #a0a0a0;
  --neutral-20: #d0d0d0;
  --neutral-10: #eeeeee;
  --neutral-05: #f7f7f7;
  --body: #121212;
}


ul.color-chip.primary li:nth-child(1) {
  background-color: var(--primary-100);
  color: #fff;
}

ul.color-chip.primary li:nth-child(2) {
  background-color: var(--primary-90);
  color: #fff;
}

ul.color-chip.primary li:nth-child(3) {
  background-color: var(--primary-80);
  color: #fff;
}

ul.color-chip.primary li:nth-child(4) {
  background-color: var(--primary-20);
}

ul.color-chip.neutral li:nth-child(1) {
  background-color: var(--neutral-60);
  color: #fff;
}

ul.color-chip.neutral li:nth-child(2) {
  background-color: var(--neutral-20);
}

ul.color-chip.neutral li:nth-child(3) {
  background-color: var(--neutral-10);
}

ul.color-chip.neutral li:nth-child(4) {
  background-color: var(--neutral-05);
}

ul.color-chip.bright li:nth-child(1) {
  background-color: var(--bright-medium);
}

ul.color-chip.bright li:nth-child(2) {
  background-color: var(--bright-light);
}

ul.color-chip.body li:nth-child(1) {
  background-color: var(--body);
  color: #fff;
}

.theme-cosmic ul.color-chip.bright li:nth-child(1) {
  color: #fff;
}



/* Tiger Neutrals */
ul.color-chip.tiger.neutral li:nth-child(1) {
  background-color: var(--neutral-100);
  color: #fff;
}

ul.color-chip.tiger.neutral li:nth-child(2) {
  background-color: var(--neutral-90);
  color: #fff;
}

ul.color-chip.tiger.neutral li:nth-child(3) {
  background-color: var(--neutral-85);
  color: #fff;
}

ul.color-chip.tiger.neutral li:nth-child(4) {
  background-color: var(--neutral-80);
  color: #fff;
}

ul.color-chip.tiger.neutral li:nth-child(5) {
  background-color: var(--neutral-60);
  color: #fff;
}

ul.color-chip.tiger.neutral li:nth-child(6) {
  background-color: var(--neutral-40);
}

ul.color-chip.tiger.neutral li:nth-child(7) {
  background-color: var(--neutral-20);
}
ul.color-chip.tiger.neutral li:nth-child(8) {
  background-color: var(--neutral-10);
}

ul.color-chip.tiger.neutral li:nth-child(9) {
  background-color: var(--neutral-05);
}