html {
  --lumo-font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
}

[theme~="dark"] {
  --lumo-base-color: hsl(210, 10%, 12%);
  --lumo-shade-5pct: rgba(7, 8, 8, 0.05);
  --lumo-shade-10pct: rgba(7, 8, 8, 0.1);
  --lumo-shade-20pct: rgba(7, 8, 8, 0.2);
  --lumo-shade-30pct: rgba(7, 8, 8, 0.3);
  --lumo-shade-40pct: rgba(7, 8, 8, 0.4);
  --lumo-shade-50pct: rgba(7, 8, 8, 0.5);
  --lumo-shade-60pct: rgba(7, 8, 8, 0.6);
  --lumo-shade-70pct: rgba(7, 8, 8, 0.7);
  --lumo-shade-80pct: rgba(7, 8, 8, 0.8);
  --lumo-shade-90pct: rgba(7, 8, 8, 0.9);
  --lumo-shade: hsl(210, 4%, 3%);
  --lumo-primary-text-color: rgb(64, 160, 159);
  --lumo-primary-color-50pct: rgba(64, 160, 159, 0.5);
  --lumo-primary-color-10pct: rgba(64, 160, 159, 0.1);
  --lumo-primary-color: hsl(179, 43%, 44%);
  --lumo-error-text-color: rgb(222, 91, 84);
  --lumo-error-color-50pct: rgba(222, 91, 84, 0.5);
  --lumo-error-color-10pct: rgba(222, 91, 84, 0.1);
  --lumo-error-color: hsl(3, 68%, 60%);
  --lumo-success-text-color: rgb(69, 140, 99);
  --lumo-success-color-50pct: rgba(55, 160, 98, 0.5);
  --lumo-success-color-10pct: rgba(55, 160, 98, 0.1);
  --lumo-success-color: hsl(145, 49%, 42%);
}