/* Swiss grid system shared by deck, hub and prototype.
   Reference: International Typographic Style, visible 12 column grid, one signal red. */

:root {
  --paper: #f2f0eb;
  --paper-2: #e8e5de;
  --ink: #111111;
  --ink-2: #4a4a48;
  --ink-3: #8a8884;
  --rule: rgba(17, 17, 17, 0.12);
  --rule-strong: rgba(17, 17, 17, 0.85);
  --red: #e30613;
  --red-ink: #ffffff;
  --display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121211;
    --paper-2: #1c1c1a;
    --ink: #f2f0eb;
    --ink-2: #c4c1ba;
    --ink-3: #8a8884;
    --rule: rgba(242, 240, 235, 0.12);
    --rule-strong: rgba(242, 240, 235, 0.85);
  }
}
:root[data-theme="dark"] {
  --paper: #121211;
  --paper-2: #1c1c1a;
  --ink: #f2f0eb;
  --ink-2: #c4c1ba;
  --ink-3: #8a8884;
  --rule: rgba(242, 240, 235, 0.12);
  --rule-strong: rgba(242, 240, 235, 0.85);
}

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

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}

.mono {
  font-family: var(--mono);
  font-size: 0.78em;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.red { color: var(--red); }
.block-red { background: var(--red); color: var(--red-ink); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--red); }

.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--rule-strong);
  padding: 3px 8px;
}