/* Paper, charcoal, and print red. Legacy console token names retain their roles. */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Comic Neue";
  src: url("../fonts/ComicNeue-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --obsidian: #171716;
  --ink-1: #1c1c1a;
  --ink-2: #22221f;
  --ink-3: #292824;
  --ink-4: #36332e;
  --line: rgba(238, 231, 216, 0.09);
  --line-strong: rgba(238, 231, 216, 0.18);
  --control-edge: #8c8379;

  --ivory: #f4f1ea;
  --ivory-2: #c9c3b8;
  --ivory-3: #aaa297;

  --amber: #b43928;
  --amber-hi: #963021;
  --amber-lo: #873021;
  --amber-wash: rgba(180, 57, 40, 0.13);
  --amber-text: #f1a18f;
  --on-amber: #ffffff;
  --accent: var(--amber);
  --accent-hi: var(--amber-hi);
  --accent-text: var(--amber-text);
  --on-accent: var(--on-amber);

  --sage: #93c3a0;
  --sage-wash: rgba(147, 195, 160, 0.12);
  --ember: #e98a6f;
  --ember-wash: rgba(233, 138, 111, 0.12);

  --paper: #f4f1ea;
  --paper-ink: #25282b;

  --sans: "Manrope", "Segoe UI", system-ui, sans-serif;
  --comic: "Comic Neue", "Comic Sans MS", cursive;

  --r1: 2px;
  --r2: 3px;
  --r3: 6px;

  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --focus: 0 0 0 2px var(--obsidian), 0 0 0 4px var(--amber);
}

:root[data-theme="day"] {
  color-scheme: light;
  --obsidian: #f4f1ea;
  --ink-1: #ece7de;
  --ink-2: #fdfbf6;
  --ink-3: #e5dfd4;
  --ink-4: #d5cec2;
  --line: rgba(37, 40, 43, 0.14);
  --line-strong: rgba(37, 40, 43, 0.35);
  --control-edge: #867a6a;
  --ivory: #25282b;
  --ivory-2: #454747;
  --ivory-3: #64615b;
  --amber-text: #9e2c1d;
  --sage: #2d6641;
  --sage-wash: rgba(45, 102, 65, 0.12);
  --ember: #973327;
  --ember-wash: rgba(151, 51, 39, 0.10);
  --focus: 0 0 0 2px var(--ink-2), 0 0 0 4px var(--amber-text);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--obsidian);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  font-feature-settings: "ss01", "tnum" 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--amber-text);
  outline-offset: 3px;
}

::selection {
  background: var(--amber);
  color: var(--on-amber);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--r1);
  background: var(--amber);
  color: var(--on-amber);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus {
  top: 12px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}