@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.15 h);
  stroke-width: 2;
}

.light :is(text, use) { fill: oklch(from var(--col) 0.96 0.05 calc(h + 180)); }
.dark  :is(text, use) { fill: oklch(from var(--col) 0.18 0.2  calc(h + 180)); }

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

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