@font-face { font-family: "IM Fell English"; src: url("fonts/im-fell-english-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("fonts/caveat-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* brand palette, defined once */
  --forest: #1C3444;
  --evergreen: #2C4A3B;
  --rosewood: #7A3B41;
  --terracotta: #C57B57;
  --cream: #F3E7D3;
  --ink: #12222C;
  --evergreen-mid: #4A6B58;

  /* semantic tokens, light = paper */
  --page: var(--cream);
  --stage: color-mix(in srgb, var(--cream) 88%, var(--evergreen-mid));
  --note: var(--cream);
  --note-edge: var(--evergreen);
  --text: var(--ink);
  --text-soft: color-mix(in srgb, var(--ink) 72%, var(--cream));
  --line: var(--evergreen-mid);
  --head-bg: var(--forest);
  --head-text: var(--cream);
  --accent: var(--terracotta);
  --on-accent: var(--ink);
  --emph: var(--rosewood);
  --wash-fertile: color-mix(in srgb, var(--evergreen) 42%, var(--stage));
  --wash-plain: color-mix(in srgb, var(--ink) 7%, var(--stage));
  --wash-harsh: color-mix(in srgb, var(--forest) 30%, var(--stage));
  --stipple: var(--forest);
  /* six tribe tints, only palette tokens or mixes along the palette's own axis */
  --tribe-0: var(--forest);
  --tribe-1: var(--terracotta);
  --tribe-2: var(--evergreen-mid);
  --tribe-3: var(--rosewood);
  --tribe-4: color-mix(in srgb, var(--forest) 55%, var(--cream));
  --tribe-5: color-mix(in srgb, var(--terracotta) 55%, var(--rosewood));
  --ring: var(--ink);
  /* the second line of a chart: rosewood on paper, terracotta in lamplight */
  --series-b: var(--emph);

  --font-display: "IM Fell English", "Iowan Old Style", Georgia, serif;
  --font-body: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: var(--forest);
    --stage: color-mix(in srgb, var(--forest) 86%, var(--ink));
    --note: var(--evergreen);
    --note-edge: var(--evergreen-mid);
    --text: var(--cream);
    --text-soft: color-mix(in srgb, var(--cream) 78%, var(--evergreen));
    --line: var(--evergreen-mid);
    --head-bg: var(--ink);
    --head-text: var(--cream);
    --wash-fertile: color-mix(in srgb, var(--evergreen-mid) 70%, var(--stage));
    --wash-plain: color-mix(in srgb, var(--cream) 8%, var(--stage));
    --wash-harsh: color-mix(in srgb, var(--ink) 55%, var(--stage));
    --stipple: var(--cream);
    --tribe-0: var(--cream);
    --tribe-1: var(--terracotta);
    --tribe-2: color-mix(in srgb, var(--evergreen-mid) 70%, var(--cream));
    --tribe-3: color-mix(in srgb, var(--rosewood) 50%, var(--cream));
    --tribe-4: color-mix(in srgb, var(--terracotta) 50%, var(--cream));
    --tribe-5: color-mix(in srgb, var(--forest) 40%, var(--cream));
    --ring: var(--cream);
    --series-b: var(--accent);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: var(--forest);
  --stage: color-mix(in srgb, var(--forest) 86%, var(--ink));
  --note: var(--evergreen);
  --note-edge: var(--evergreen-mid);
  --text: var(--cream);
  --text-soft: color-mix(in srgb, var(--cream) 78%, var(--evergreen));
  --line: var(--evergreen-mid);
  --head-bg: var(--ink);
  --head-text: var(--cream);
  --wash-fertile: color-mix(in srgb, var(--evergreen-mid) 70%, var(--stage));
  --wash-plain: color-mix(in srgb, var(--cream) 8%, var(--stage));
  --wash-harsh: color-mix(in srgb, var(--ink) 55%, var(--stage));
  --stipple: var(--cream);
  --tribe-0: var(--cream);
  --tribe-1: var(--terracotta);
  --tribe-2: color-mix(in srgb, var(--evergreen-mid) 70%, var(--cream));
  --tribe-3: color-mix(in srgb, var(--rosewood) 50%, var(--cream));
  --tribe-4: color-mix(in srgb, var(--terracotta) 50%, var(--cream));
  --tribe-5: color-mix(in srgb, var(--forest) 40%, var(--cream));
  --ring: var(--cream);
  --series-b: var(--accent);
  color-scheme: dark;
}