@font-face {
  font-family: "Archivo";
  src: url("./fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --ground: #0E2A33;
  --panel: #123640;
  --rule: #4E8390;
  --hair: #2A5563;
  --paper: #F1EBDD;
  --muted: #9FB6BD;
  --ink: #0B171C;
  --vermilion: #EA5A38;
  --turquoise: #5CBCC2;
  --cobalt: #1F4FB4;
  --wine: #7B1E2B;

  --field: var(--ground);
  --type: var(--paper);
  --dim: var(--muted);
  --link: var(--turquoise);
  --focus: var(--turquoise);
  --edge: var(--rule);
  --thread: var(--hair);
  --mark: var(--vermilion);

  --font-latin: "Archivo", "Helvetica Neue", Helvetica, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  --font-ja: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --stretch-display: 68%;
  --stretch-utility: 78%;
  --radius: 0;
  --rail: 56px;
  --gutter: clamp(18px, 4vw, 56px);
  --page: 1440px;
  --measure: 34em;
  --stroke: 3px;
}

.invert {
  background: var(--paper);
  color: var(--ink);
  --field: var(--paper);
  --type: var(--ink);
  --dim: #4A5566;
  --link: var(--cobalt);
  --focus: var(--cobalt);
  --edge: #5B6B85;
  --thread: #C3BEB1;
  --mark: var(--wine);
}