:root {
  --bg: #faf8f4;
  --panel-bg: #f0ece4;
  --panel-bg-sunken: #e5e0d6;
  --border: #cec7b8;
  --text: #2a2520;
  --text-dim: #78706a;
  --accent: #486080;
  --accent-dim: #94a8be;
  --accent-bg: #eaecf0;
  --warn: #b07228;
  --warn-bg: #f6eddf;
  --error: hsl(4 22% 22%);
  --error-bg: hsl(0 30% 55% / .18);
  --error-border: hsl(0 35% 40% / .5);
  --inlet: #506878;
  --outlet: #8a5530;
  --correct: hsl(160 28% 22%);
  --correct-bg: hsl(117 30% 55% / .18);
  --correct-border: hsl(117 35% 35% / .5);
  --instruction-bg-highlight: #ede4d4;
  --box-shadow-sm: 0 .05rem .15rem rgba(40, 30, 20, .07),
    0 .05rem .1rem rgba(40, 30, 20, .05);
  --box-shadow-md: 0 .25rem .75rem rgba(40, 30, 20, .08),
    0 .1rem .25rem rgba(40, 30, 20, .05);
  --box-shadow-lg: 0 .5rem 1.5rem rgba(40, 30, 20, .10),
    0 .25rem .5rem rgba(40, 30, 20, .05);
  --dur-fast: 120ms;
  --dur-normal: 200ms;
  --dur-slow: 600ms;
  --text-xs: clamp(.75rem, .7rem + .2vw, .875rem);
  --text-sm: clamp(.875rem, .82rem + .25vw, 1.0625rem);
  --text-base: clamp(1rem, .92rem + .35vw, 1.1875rem);
  --text-lg: clamp(1.0625rem, .95rem + .45vw, 1.3125rem);
  --text-xl: clamp(1.125rem, 1rem + .5vw, 1.4375rem);
  --text-2xl: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  --mono: ui-monospace, 'Cascadia Code', 'SF Mono', 'Fira Code', Consolas,
    'Liberation Mono', Menlo, monospace;
  --serif: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, Georgia, serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial,
    sans-serif;
  --display: Palatino, 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  font-size: 20px;
  -webkit-text-size-adjust: 100%;
  --pri-brown: hsl(25, 50%, 35%);
  --pri-brown-bg: hsla(25, 50%, 35%, .4);
  --pri-red: hsl(0, 60%, 45%);
  --pri-red-bg: hsla(0, 60%, 45%, .4);
  --pri-green-family: hsl(140, 45%, 38%);
  --pri-green-family-bg: hsla(140, 45%, 38%, .4);
  --pri-orange: hsl(35, 80%, 48%);
  --pri-orange-bg: hsla(35, 80%, 48%, .4);
  --pri-violet: hsl(270, 40%, 48%);
  --pri-violet-bg: hsla(270, 40%, 48%, .4);
  --pri-yellow: hsl(50, 70%, 48%);
  --pri-yellow-bg: hsla(50, 70%, 48%, .4);
  --pri-neutral: hsl(0, 0%, 62%);
  --pri-neutral-bg: hsla(0, 0%, 62%, .4);
}

.pri-brown {
  --pri-fg: var(--pri-brown);
  --pri-bg: var(--pri-brown-bg);
}

.pri-red {
  --pri-fg: var(--pri-red);
  --pri-bg: var(--pri-red-bg);
}

.pri-green-family {
  --pri-fg: var(--pri-green-family);
  --pri-bg: var(--pri-green-family-bg);
}

.pri-orange {
  --pri-fg: var(--pri-orange);
  --pri-bg: var(--pri-orange-bg);
}

.pri-violet {
  --pri-fg: var(--pri-violet);
  --pri-bg: var(--pri-violet-bg);
}

.pri-yellow {
  --pri-fg: var(--pri-yellow);
  --pri-bg: var(--pri-yellow-bg);
}

.pri-neutral {
  --pri-fg: var(--pri-neutral);
  --pri-bg: var(--pri-neutral-bg);
}

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

  :root {
    --bg: #1c1917;
    --panel-bg: #27231f;
    --panel-bg-sunken: #322d27;
    --border: #443d34;
    --text: #e5ddd4;
    --text-dim: #8a7e72;
    --accent: #5ab0be;
    --accent-dim: #2a5a64;
    --accent-bg: #1a2c30;
    --warn: #d49540;
    --warn-bg: #2a2218;
    --error: #d05050;
    --error-bg: #2a1818;
    --error-border: hsl(0 35% 40% / .5);
    --inlet: #5ea8d4;
    --outlet: #d4815e;
    --correct: #72b89a;
    --correct-bg: #1c2824;
    --correct-border: hsl(117 35% 35% / .5);
    --instruction-bg-highlight: #3a3228;
    --box-shadow-sm: 0 .05rem .15rem rgba(0, 0, 0, .2),
      0 .05rem .1rem rgba(0, 0, 0, .15);
    --box-shadow-md: 0 .25rem .75rem rgba(0, 0, 0, .25),
      0 .1rem .25rem rgba(0, 0, 0, .15);
    --box-shadow-lg: 0 .5rem 1.5rem rgba(0, 0, 0, .3),
      0 .25rem .5rem rgba(0, 0, 0, .15);
  }
}