@import url('https://palette.unseen.ninja/dist/palette.css');


*,
*::before,
*::after { box-sizing: border-box; }

html { font-size: 62.5%; }


:root {
  --background: light-dark(var(--lychee), var(--blackberry));
  --text: light-dark(var(--blackberry), var(--lychee));
  --surface: light-dark(var(--lychee-tint), var(--blackberry-shade));
}



body {
  --body-padding: 2.4rem;
  --footer-height: 6.4rem;

  display: grid; gap: var(--body-padding);
  grid-template-rows: calc(100svh - calc(var(--body-padding) * 2) - var(--footer-height)) calc(var(--footer-height) - var(--body-padding));
  margin: 0; padding: var(--body-padding);
  min-height: 100svh;
  color-scheme: light dark;
  background-color: var(--background);
  font: 400 normal 2rem/1.6 system-ui, sans-serif;
  color: var(--text);
}



#palette {
  display: grid; gap: var(--body-padding);
  grid-template: auto / repeat(auto-fit, minmax(400px, 1fr));
}

.swatch-card {
  --card-padding:  calc(var(--body-padding) / 1);

  display: grid; gap: var(--card-padding);
  grid-template: 1fr min-content  / repeat(3, 1fr);
  padding: var(--card-padding);
  border-radius: 1.2rem;
  background-color: light-dark(var(--white), var(--black));
}

.swatch-name {
  grid-area: -2 / 1 / -1 / -1;
  margin: 0;
  font-size: 1em;
}

.swatch {
  border-radius: .6rem;
  background-color: var(--swatch-colour);

  &:nth-of-type(1) { order: 2 }
  &:nth-of-type(2) { order: 3 }
  &:nth-of-type(3) { order: 1 }
}



#main-footer {
  display: flex;
  align-items: center; justify-content: space-between;
  font-size: .8em;
}