@import url(../fonts/muller/muller.css);
@import url(../fonts/pragmatapro/pragmatapro.css);

:root {
  --hue:   300;
  --c-hue: calc(var(--hue) + 180);
  --col:   oklch(0.8 0.04 var(--hue));
  color-scheme: light dark;

  font-family: 'Muller', sans-serif;
  text-anchor: end;
}

.swatch, .text-bg {
  transition:   fill 0.2s ease;
  fill:         var(--col);
  stroke:       oklch(from var(--col) 0.15 0.25 calc(h + 180));
  stroke-width: 2;

  filter: drop-shadow(6px 6px 0 oklch(0.4 0.2 var(--hue) / 0.45));

  @media (prefers-color-scheme: dark) {
    filter: drop-shadow(6px 6px 0 oklch(0.1 0.15 var(--hue) / 0.45));
  }
}

.light :is(text, use) { fill: oklch(from var(--col) 0.95 0.075 calc(h + 180)); }
.dark  :is(text, use) { fill: oklch(from var(--col) 0.15 0.25 calc(h + 180)); }

.name {
  font-weight: 700;
  font-size:   25px;
}

.hex {
  font-family: monospace;
  font-weight: 500;
  font-size:   15px;
}