/* Projection of tokens/dtcg.json. Do not invent hex here. */
@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/InstrumentSans-Variable.ttf") format("truetype");
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/IBMPlexMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/IBMPlexMono-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}

:root, html[data-palette="paper"] {
  color-scheme: light;
  --bg: #f4f3ef;
  --surface: #e8e7e3;
  --raised: #fafaf8;
  --ink: #0c0c0e;
  --ink-soft: #6a6a66;
  --subtle: #9a9a96;
  --line: #d4d3cf;
  --accent: #e8c547;
  --accent-ink: #0c0c0e;
  --sans: "Instrument Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius: 2px;
}

html[data-palette="ink"] {
  color-scheme: dark;
  --bg: #0c0c0e;
  --surface: #111114;
  --raised: #16161a;
  --ink: #f4f3ef;
  --ink-soft: #9a9a96;
  --subtle: #6a6a66;
  --line: #2a2a2e;
  --accent: #e8c547;
  --accent-ink: #0c0c0e;
}

@media (prefers-color-scheme: dark) {
  html[data-palette="system"] {
    color-scheme: dark;
    --bg: #0c0c0e;
    --surface: #111114;
    --raised: #16161a;
    --ink: #f4f3ef;
    --ink-soft: #9a9a96;
    --subtle: #6a6a66;
    --line: #2a2a2e;
    --accent: #e8c547;
    --accent-ink: #0c0c0e;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
}