:root {
  --background: #fff8f7;
  --on-background: #271816;
  --surface: #fff8f7;
  --surface-dim: #f0d4d1;
  --surface-bright: #fff8f7;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #fff0ef;
  --surface-container: #ffe9e7;
  --surface-container-high: #fee2df;
  --surface-container-highest: #f9dcd9;
  --on-surface: #271816;
  --surface-variant: #fddbd8;
  --on-surface-variant: #58413f;
  --inverse-surface: #3d2c2b;
  --inverse-on-surface: #ffedeb;
  --outline: #8c716e;
  --outline-variant: #dfbfbc;
  --shadow: #000000;
  --scrim: #000000;
  --surface-tint: #c0001c;
  --primary: #c0001c;
  --on-primary: #ffffff;
  --primary-container: #ffdad7;
  --on-primary-container: #930013;
  --inverse-primary: #ffb3ad;
  --secondary: #815341;
  --on-secondary: #ffffff;
  --secondary-container: #ffdbce;
  --on-secondary-container: #663c2b;
  --tertiary: #855327;
  --on-tertiary: #ffffff;
  --tertiary-container: #ffdcc3;
  --on-tertiary-container: #693c11;
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #93000a;
  --primary-fixed: #ffdad7;
  --primary-fixed-dim: #ffb3ad;
  --on-primary-fixed: #410004;
  --on-primary-fixed-variant: #930013;
  --secondary-fixed: #ffdbce;
  --secondary-fixed-dim: #f5b9a2;
  --on-secondary-fixed: #321205;
  --on-secondary-fixed-variant: #663c2b;
  --tertiary-fixed: #ffdcc3;
  --tertiary-fixed-dim: #fbb884;
  --on-tertiary-fixed: #2f1500;
  --on-tertiary-fixed-variant: #693c11;
}

html {
  color-scheme: dark light;
  accent-color: var(--primary);
}

* {
  box-sizing: border-box;
}

ul[role="list"] {
  list-style-type: none;
  padding: 0;
}

body {
  margin: 32px auto;
  padding: 0 1rem;
  max-width: 720px;
  background-color: var(--background);
  color: var(--on-background);
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

button,
input,
textarea,
select {
  padding: 8px 20px;
  font: inherit;
  min-width: 0;
  width: fit-content;
}

button {
  border: none;
  background-color: var(--surface-container-high);
  border-radius: 4px;
  &:hover,
  &.hover {
    opacity: 0.8;
  }
  &:active {
    transform: scale(0.95);
  }
}

a {
  color: var(--primary);
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}

fieldset {
  border: none;
  padding: 0;
  margin-bottom: 1rem;
}

dialog {
  border: none;
  background-color: var(--surface-container);
  color: var(--on-surface);
}

:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.primary {
  background-color: var(--primary);
  color: var(--on-primary);
}

.error-text {
  color: var(--error);
}

.sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (prefers-color-scheme: dark) {

  :root {
    --background: #1e100f;
    --on-background: #f9dcd9;
    --surface: #1e100f;
    --surface-dim: #1e100f;
    --surface-bright: #473533;
    --surface-container-lowest: #180b0a;
    --surface-container-low: #271816;
    --surface-container: #2b1c1a;
    --surface-container-high: #362624;
    --surface-container-highest: #42302f;
    --on-surface: #f9dcd9;
    --surface-variant: #58413f;
    --on-surface-variant: #dfbfbc;
    --inverse-surface: #f9dcd9;
    --inverse-on-surface: #3d2c2b;
    --outline: #a78a87;
    --outline-variant: #58413f;
    --shadow: #000000;
    --scrim: #000000;
    --surface-tint: #ffb3ad;
    --primary: #ffb3ad;
    --on-primary: #68000a;
    --primary-container: #930013;
    --on-primary-container: #ffdad7;
    --inverse-primary: #c0001c;
    --secondary: #f5b9a2;
    --on-secondary: #4b2717;
    --secondary-container: #663c2b;
    --on-secondary-container: #ffdbce;
    --tertiary: #fbb884;
    --on-tertiary: #4d2600;
    --tertiary-container: #693c11;
    --on-tertiary-container: #ffdcc3;
    --error: #ffb4ab;
    --on-error: #690005;
    --error-container: #93000a;
    --on-error-container: #ffdad6;
    --primary-fixed: #ffdad7;
    --primary-fixed-dim: #ffb3ad;
    --on-primary-fixed: #410004;
    --on-primary-fixed-variant: #930013;
    --secondary-fixed: #ffdbce;
    --secondary-fixed-dim: #f5b9a2;
    --on-secondary-fixed: #321205;
    --on-secondary-fixed-variant: #663c2b;
    --tertiary-fixed: #ffdcc3;
    --tertiary-fixed-dim: #fbb884;
    --on-tertiary-fixed: #2f1500;
    --on-tertiary-fixed-variant: #693c11;
  }
}