:root {
  --text-color: #222;

  /* Equal Saturation Perception (potentially small text) */
  --neutral-grey: hsl(0 0% 50%);
  --caribbean-sea: hsl(180 80% 45%);
  --summer-sky: hsl(210 78% 52%);
  --fresh-lavender: hsl(260 75% 55%);
  --tasty-raspberry: hsl(330 75% 50%);
  --juicy-orange: hsl(30 90% 50%);
  --golden-sun: hsl(50 95% 50%);

  /* Max Luminance Perception (potentially larger text and surfaces) */
  --neutral-grey-max: hsl(0 0% 50%);
  --caribbean-sea-max: hsl(180 100% 42%);
  --summer-sky-max: hsl(210 100% 54%);
  --fresh-lavender-max: hsl(270 100% 58%);
  --tasty-raspberry-max: hsl(330 100% 60%);
  --juicy-orange-max: hsl(30 100% 55%);
  --golden-sun-max: hsl(50 100% 50%);

  /* Neutral Grey variants */
  --neutral-grey-80: color-mix(in hsl, var(--neutral-grey) 80%, light-dark(white, black));
  --neutral-grey-50: color-mix(in hsl, var(--neutral-grey) 50%, light-dark(white, black));
  --neutral-grey-10: color-mix(in hsl, var(--neutral-grey) 10%, light-dark(white, black));
  --neutral-grey-05: color-mix(in hsl, var(--neutral-grey) 5%, light-dark(white, black));

  --neutral-grey-o80: hsl(from var(--neutral-grey) h s l / 0.8);
  --neutral-grey-o50: hsl(from var(--neutral-grey) h s l / 0.5);
  --neutral-grey-o10: hsl(from var(--neutral-grey) h s l / 0.1);
  --neutral-grey-o05: hsl(from var(--neutral-grey) h s l / 0.05);

  /* Caribbean Sea variants */
  --caribbean-sea-80: color-mix(in oklch, var(--caribbean-sea) 80%, light-dark(white, black));
  --caribbean-sea-50: color-mix(in oklch, var(--caribbean-sea) 50%, light-dark(white, black));
  --caribbean-sea-10: color-mix(in oklch, var(--caribbean-sea) 10%, light-dark(white, black));
  --caribbean-sea-05: color-mix(in oklch, var(--caribbean-sea) 5%, light-dark(white, black));

  --caribbean-sea-o80: hsl(from var(--caribbean-sea) h s l / 0.8);
  --caribbean-sea-o50: hsl(from var(--caribbean-sea) h s l / 0.5);
  --caribbean-sea-o10: hsl(from var(--caribbean-sea) h s l / 0.1);
  --caribbean-sea-o05: hsl(from var(--caribbean-sea) h s l / 0.05);

  /* Summer Sky variants */
  --summer-sky-80: color-mix(in oklch, var(--summer-sky) 80%, light-dark(white, black));
  --summer-sky-50: color-mix(in oklch, var(--summer-sky) 50%, light-dark(white, black));
  --summer-sky-10: color-mix(in oklch, var(--summer-sky) 10%, light-dark(white, black));
  --summer-sky-05: color-mix(in oklch, var(--summer-sky) 5%, light-dark(white, black));

  --summer-sky-o80: hsl(from var(--summer-sky) h s l / 0.8);
  --summer-sky-o50: hsl(from var(--summer-sky) h s l / 0.5);
  --summer-sky-o10: hsl(from var(--summer-sky) h s l / 0.1);
  --summer-sky-o05: hsl(from var(--summer-sky) h s l / 0.05);

  /* Fresh Lavender variants */
  --fresh-lavender-80: color-mix(in oklch, var(--fresh-lavender) 80%, light-dark(white, black));
  --fresh-lavender-50: color-mix(in oklch, var(--fresh-lavender) 50%, light-dark(white, black));
  --fresh-lavender-10: color-mix(in oklch, var(--fresh-lavender) 10%, light-dark(white, black));
  --fresh-lavender-05: color-mix(in oklch, var(--fresh-lavender) 5%, light-dark(white, black));

  --fresh-lavender-o80: hsl(from var(--fresh-lavender) h s l / 0.8);
  --fresh-lavender-o50: hsl(from var(--fresh-lavender) h s l / 0.5);
  --fresh-lavender-o10: hsl(from var(--fresh-lavender) h s l / 0.1);
  --fresh-lavender-o05: hsl(from var(--fresh-lavender) h s l / 0.05);

  /* Tasty Raspberry variants */
  --tasty-raspberry-80: color-mix(in oklch, var(--tasty-raspberry) 80%, light-dark(white, black));
  --tasty-raspberry-50: color-mix(in oklch, var(--tasty-raspberry) 50%, light-dark(white, black));
  --tasty-raspberry-10: color-mix(in oklch, var(--tasty-raspberry) 10%, light-dark(white, black));
  --tasty-raspberry-05: color-mix(in oklch, var(--tasty-raspberry) 5%, light-dark(white, black));

  --tasty-raspberry-o80: hsl(from var(--tasty-raspberry) h s l / 0.8);
  --tasty-raspberry-o50: hsl(from var(--tasty-raspberry) h s l / 0.5);
  --tasty-raspberry-o10: hsl(from var(--tasty-raspberry) h s l / 0.1);
  --tasty-raspberry-o05: hsl(from var(--tasty-raspberry) h s l / 0.05);

  /* Juicy Orange variants */
  --juicy-orange-80: color-mix(in oklch, var(--juicy-orange) 80%, light-dark(white, black));
  --juicy-orange-50: color-mix(in oklch, var(--juicy-orange) 50%, light-dark(white, black));
  --juicy-orange-10: color-mix(in oklch, var(--juicy-orange) 10%, light-dark(white, black));
  --juicy-orange-05: color-mix(in oklch, var(--juicy-orange) 5%, light-dark(white, black));

  --juicy-orange-o80: hsl(from var(--juicy-orange) h s l / 0.8);
  --juicy-orange-o50: hsl(from var(--juicy-orange) h s l / 0.5);
  --juicy-orange-o10: hsl(from var(--juicy-orange) h s l / 0.1);
  --juicy-orange-o05: hsl(from var(--juicy-orange) h s l / 0.05);

  /* Golden Sun variants */
  --golden-sun-80: color-mix(in oklch, var(--golden-sun) 80%, light-dark(white, black));
  --golden-sun-50: color-mix(in oklch, var(--golden-sun) 50%, light-dark(white, black));
  --golden-sun-10: color-mix(in oklch, var(--golden-sun) 10%, light-dark(white, black));
  --golden-sun-05: color-mix(in oklch, var(--golden-sun) 5%, light-dark(white, black));

  --golden-sun-o80: hsl(from var(--golden-sun) h s l / 0.8);
  --golden-sun-o50: hsl(from var(--golden-sun) h s l / 0.5);
  --golden-sun-o10: hsl(from var(--golden-sun) h s l / 0.1);
  --golden-sun-o05: hsl(from var(--golden-sun) h s l / 0.05);

  --max-content-width: 1200px;
  --content-padding: 2rem;
  --box-padding: 2rem;
  --gap: 1rem;

  @media screen and (width <= 960px) {
    --content-padding: 1rem;
    --box-padding: 1.5rem;
    --gap: 0.5rem;
  }
}

.neutral-grey {
  --tint: var(--neutral-grey);
}
.caribbean-sea {
  --tint: var(--caribbean-sea);
}
.summer-sky {
  --tint: var(--summer-sky);
}
.fresh-lavender {
  --tint: var(--fresh-lavender);
}
.tasty-raspberry {
  --tint: var(--tasty-raspberry);
}
.juicy-orange {
  --tint: var(--juicy-orange);
}
.golden-sun {
  --tint: var(--golden-sun);
}

.raspberry-sky {
  --tint: var(--caribbean-sea) linear-gradient(to right, var(--tasty-raspberry), var(--summer-sky));
}
.tasty-sun {
  --tint: var(--summer-sky) linear-gradient(to right, var(--tasty-raspberry), var(--golden-sun));
}
.caribbean-lavender {
  --tint: var(--fresh-lavender) linear-gradient(to right, var(--fresh-lavender), var(--caribbean-sea));
}
.summer-sea {
  --tint: var(--tasty-raspberry) linear-gradient(to right, var(--summer-sky), var(--caribbean-sea));
}
.lavender-sky {
  --tint: var(--juicy-orange) linear-gradient(to right, var(--fresh-lavender), var(--summer-sky));
}
.raspberry-sea {
  --tint: var(--golden-sun) linear-gradient(to right, var(--tasty-raspberry), var(--caribbean-sea));
}

/* --------------- Base --------------- */

body {
  font-family: Outfit, system-ui, sans-serif;
  margin: var(--content-padding);
  background: color-mix(in oklch, var(--neutral-grey) 10%, white);
  color: var(--text-color);
}

.button {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  padding-inline: 1.5rem;
  min-width: 3rem;
  height: 3rem;
  color: inherit;
  background: transparent;
  border: none;
  border-radius: 1.5rem;
  cursor: pointer;

  &:has(svg:only-child) {
    padding: 0;
  }

  &:hover {
    background: var(--neutral-grey-o10);
  }

  svg {
    fill: currentColor;
  }
}

.dropdown {
  appearance: base-select;
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  padding-inline: 1rem;
  height: 3rem;
  color: inherit;
  background: transparent;
  border: none;
  border-radius: 1.5rem;
  cursor: pointer;

  &::picker-icon {
    content: '↓';
  }

  &::picker(select) {
    appearance: base-select;
    padding-block: 1rem;
    border: 1px solid hsla(0 0 50% / 0.25);
    border-radius: 1.5rem;
    box-shadow: 0 10pt 30pt hsla(0 0 50% / 0.25);
  }

  &:hover {
    background: var(--neutral-grey-o10);
    color: var(--text-color);
  }

  option {
    display: flex;
    justify-content: flex-start;
    gap: 1em;
    padding-block: 0.5rem;
    padding-inline: 1rem;

    &:hover {
      background: var(--neutral-grey-o10);
    }
  }
}

/* --------------- Common --------------- */

[draggable='true'] {
  cursor: grab;
}

.siteHead {
  margin: 3rem 0;
  text-align: center;
}

.mainHeadline {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.headline {
  font-size: 1.5rem;

  small {
    font-size: 0.875em;
    font-weight: 200;
  }
}

section {
  display: flow-root;
  margin: var(--box-padding) auto;
  padding: 0 var(--box-padding);
  max-width: var(--max-content-width);
  border-radius: 2.5rem;
  box-sizing: border-box;
  box-shadow: 0 10pt 30pt hsla(0 0 50% / 0.25);
  background: white;
  overflow: hidden;

  &::before {
    content: '';
    display: block;
    margin-bottom: var(--box-padding);
  }
  &::after {
    content: '';
    display: block;
    margin-top: var(--box-padding);
  }
}

/* --------------- Color Samples --------------- */

.color {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  margin: var(--gap) 0;
  padding: 1.5rem;
  height: 4rem;
  font: inherit;
  color: white;
  background: var(--tint);
  border: none;
  border-radius: 2rem;
}

.gradient {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin: var(--gap) 0;
  padding: 1.5rem;
  height: 4rem;
  font: inherit;
  color: white;
  background: var(--tint);
  border: none;
  border-radius: 2rem;
}

/* --------------- Color Palette --------------- */

#colors {
  padding: 0;
  &::after {
    display: none;
  }
  header {
    text-align: center;
  }
}

.palette {
  display: flex;
  justify-content: center;
  padding: var(--box-padding) var(--box-padding);
  background: linear-gradient(to bottom, white 50%, black 50%);
}

.column {
  display: grid;
  grid-template-rows: repeat(9, 4rem);
  gap: 0rem;
  width: 8rem;
}

.swatch {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);

  &::after {
    content: '';
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 0.6rem;
    opacity: 0.8;
  }

  &.shade::before {
    position: absolute;
    content: '';
    inset: 0;
    background: black;
    z-index: -1;
  }

  &.tint::before {
    position: absolute;
    content: '';
    inset: 0;
    background: white;
    z-index: -1;
  }

  &.o100 {
    background: color-mix(in oklch, var(--tint) 100%, transparent);
    &::after {
      content: '100%';
    }
  }
  &.o90 {
    background: color-mix(in oklch, var(--tint) 90%, transparent);
    &::after {
      content: '90%';
    }
  }
  &.o80 {
    background: color-mix(in oklch, var(--tint) 80%, transparent);
    &::after {
      content: '80%';
    }
  }
  &.o70 {
    background: color-mix(in oklch, var(--tint) 70%, transparent);
    &::after {
      content: '70%';
    }
  }
  &.o60 {
    background: color-mix(in oklch, var(--tint) 60%, transparent);
    &::after {
      content: '60%';
    }
  }
  &.o50 {
    background: color-mix(in oklch, var(--tint) 50%, transparent);
    &::after {
      content: '50%';
    }
  }
  &.o40 {
    background: color-mix(in oklch, var(--tint) 40%, transparent);
    &::after {
      content: '40%';
    }
    &.shade::after {
      color: var(--neutral-grey);
    }
  }
  &.o30 {
    background: color-mix(in oklch, var(--tint) 30%, transparent);
    &::after {
      content: '30%';
    }
    &.shade::after {
      color: var(--neutral-grey);
    }
  }
  &.o20 {
    background: color-mix(in oklch, var(--tint) 20%, transparent);
    &::after {
      content: '20%';
    }
    &.shade::after {
      color: var(--neutral-grey);
    }
  }
  &.o10 {
    background: color-mix(in oklch, var(--tint) 10%, transparent);
    &::after {
      content: '10%';
    }
    &.shade::after {
      color: var(--neutral-grey);
    }
  }
  &.o05 {
    background: color-mix(in oklch, var(--tint) 5%, transparent);
    &::after {
      content: '5%';
    }
    &.shade::after {
      color: var(--neutral-grey);
    }
  }
}

/* --------------- Polarities --------------- */

.contrasts {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--gap);
  row-gap: calc(var(--gap) * 2);
  justify-content: space-between;

  .contrast {
    flex: 0 0 15%;
    display: flex;

    .base {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 5rem;
      aspect-ratio: 1 / 1;
      background: var(--tint, black);

      &:first-child {
        border-radius: 100% 0% 0 100%;
      }
      &:last-child {
        border-radius: 0% 100% 100% 0%;
      }
    }

    .opposite {
      width: 50%;
      height: 50%;
      background: var(--tint, white);
      border-radius: 100%;
    }
  }
}

/* --------------- Logo Design --------------- */

#logo-colors {
  #logo {
    width: 100%;
    height: auto;
  }

  #copy-logo {
    float: inline-end;
    display: flex;

    .button,
    .dropdown {
      color: var(--neutral-grey-o80);

      &:hover {
        color: var(--text-color);
      }
    }
  }

  .gradient-stops {
    --thumb-size: 2rem;

    position: relative;
    display: grid;
    grid-template: repeat(2, max-content) 4rem / 1fr 1fr;
    margin: 1rem auto;

    input[type='range'] {
      appearance: none;
      z-index: 1;
      grid-column: 1 / span 2;
      grid-row: 3;
      margin: 0;
      padding: 0 0.875rem;
      background: none;
      pointer-events: none;

      &::-webkit-slider-runnable-track {
        appearance: none;
        width: 100%;
        height: 100%;
        background: none;
      }

      &::-webkit-slider-thumb {
        appearance: none;
        width: 0.25rem;
        height: 1.5rem;
        border-radius: 1rem;
        background: lightgray;
        border: none;
        pointer-events: auto;
        cursor: e-resize;
      }

      &:focus {
        z-index: 2;
        color: darkorange;
      }
    }

    .color-pickers {
      position: absolute;
      top: 2rem;
      left: 1rem;
      right: 1rem;
      height: var(--thumb-size);

      input[type='color'] {
        z-index: 10;
        position: absolute;
        left: 0;
        margin: 0;
        width: var(--thumb-size);
        height: var(--thumb-size);
        padding: 0.125rem;
        background: white;
        border: none;
        border-radius: 5rem;
        transform: translateX(-50%);
        filter: drop-shadow(0px 2px 4px hsl(0 0 0 / 0.5));
        cursor: pointer;

        &::-webkit-color-swatch-wrapper {
          appearance: none;
          padding: 0;
        }

        &::-webkit-color-swatch {
          appearance: none;
          border: none;
          border-radius: 5rem;
        }
      }
    }
  }

  .colors {
    --overlap: 4rem;

    display: flex;
    padding-left: var(--overlap);

    .color {
      flex: 1 1 auto;
      padding-right: var(--overlap);
      margin-left: calc(var(--overlap) * -1);
      text-wrap: balance;
      background-color: var(--tint);

      @media screen and (width < 720px) {
        font-size: 0;
      }
    }
  }
}

/* --------------- Filled Cards --------------- */

#fills {
  .cards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);

    .card {
      box-sizing: border-box;
      width: calc(50% - var(--gap));
    }
  }

  .card {
    display: flow-root;
    padding: 0 var(--box-padding);
    border-radius: 2rem;
    border: 1px solid transparent;
    color: var(--tint, currentColor);
    border: 0.0625rem solid var(--tint, currentColor);

    &::before {
      content: '';
      display: block;
      margin-bottom: var(--box-padding);
    }
    &::after {
      content: '';
      display: block;
      margin-top: var(--box-padding);
    }

    &.inverse {
      color: white;
      background: var(--tint);
    }
    &.tonal {
      color: color-mix(in oklch, var(--tint), black 5%);
      background: color-mix(in oklch, var(--tint) 5%, transparent);
      border-color: color-mix(in oklch, var(--tint) 20%, transparent);
    }

    .title {
      margin: 1.5rem 0 1rem;
      font-size: 2rem;
    }

    .button {
      margin-block: 2rem 0;
      padding: 0;
      height: auto;
      background: none;

      &:hover {
        text-decoration: underline;
      }
    }

    &.golden-sun {
      &.inverse {
        color: color-mix(in oklch, var(--golden-sun), black 90%);
      }
      &.tonal {
        color: color-mix(in oklch, var(--golden-sun), black 20%);
      }
    }
  }
}