/* ============================================================================
   moonsd · tokens — "The Register"
   A page that keeps a record of what is alive: bone paper, ink, one vermilion
   signal for the thing happening now, and a dark board inset into the paper the
   way a departure board hangs in a hall. Corners are square everywhere; the
   structure is rule, margin and tabular figure.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- paper and ink ---- */
  --paper:      #F3F0E7;
  --plate:      #EAE6D9;   /* a panel pressed into the paper */
  --plate-deep: #E0DBCC;
  --ink:        #14171B;
  --ink-soft:   #565A61;
  --ink-faint:  #8B8677;
  --rule:       #D6D0BF;
  --rule-strong:#B9B29E;

  /* ---- the board: always dark, in both themes ---- */
  --board:      #14161A;
  --board-edge: #2A2D33;
  --board-ink:  #E9E5D9;
  --board-dim:  #8D9098;
  --board-cell: #1B1E23;

  /* ---- the one signal ---- */
  --signal:     #BE4227;
  --signal-soft: color-mix(in srgb, var(--signal) 14%, transparent);

  /* ---- type ---- */
  --font-text: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* ---- a 4px rhythm, and the wider stops ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* ---- motion: one roll, one drain, nothing else ---- */
  --t1: 120ms; --t2: 240ms; --t3: 480ms;
  --ease: cubic-bezier(0.2, 0.6, 0.25, 1);

  --page: 1140px;
  --margin: 104px;   /* the ruled margin the folios sit in */
}

[data-theme="dark"] {
  color-scheme: dark;

  --paper:      #0C0E11;
  --plate:      #14171C;
  --plate-deep: #1A1E24;
  --ink:        #E7E3D7;
  --ink-soft:   #9AA0A8;
  --ink-faint:  #6C7178;
  --rule:       #23272E;
  --rule-strong:#333840;

  --board:      #191D24;
  --board-edge: #343B45;
  --board-ink:  #F2EEE2;
  --board-dim:  #8E949D;
  --board-cell: #232830;

  --signal:     #EE7040;
  --signal-soft: color-mix(in srgb, var(--signal) 18%, transparent);
}

/* ---- reset: no radius, anywhere ---- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
/* a reader must see the characters they have to type */
html, button, input, textarea, select { font-variant-ligatures: no-contextual; }
img, svg, table, pre { max-width: 100%; }
* { min-width: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--signal-soft); }

/* ---- text ---- */
h1, h2, h3, h4 {
  font-family: var(--font-text);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0;
}
h1 { font-size: clamp(40px, 6vw, 76px); font-weight: 700; }
h2 { font-size: clamp(23px, 2.6vw, 31px); }
h3 { font-size: 19px; letter-spacing: -0.012em; }
p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

/* ---- the folio: every label on this page is set the same way ---- */
.folio {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---- links: a rule under the text, vermilion when the pointer is on it ---- */
a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
}
a:hover { border-bottom-color: var(--signal); }

code, pre, .mono { font-family: var(--font-mono); font-variant-ligatures: no-contextual; }
code.inline {
  font-size: 0.88em;
  background: var(--plate);
  border: 1px solid var(--rule);
  padding: 0.06em 0.34em;
  overflow-wrap: anywhere;
}

pre {
  margin: 0;
  background: var(--plate);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--ink);
  padding: var(--s5);
  overflow: auto;
  font-size: 13px;
  line-height: 1.72;
  white-space: pre;
  color: var(--ink);
}
pre .c { color: var(--ink-faint); }
pre .k { color: var(--signal); }
pre .s { color: var(--ink-soft); }

table { width: 100%; border-collapse: collapse; }
th, td {
  text-align: left;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  overflow-wrap: anywhere;
}
th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
td code { font-size: 13px; }
.tbl { overflow-x: auto; border: 1px solid var(--rule); background: var(--plate); }
.tbl table { border-bottom: 0; }
.tbl tr:last-child td { border-bottom: 0; }

/* ---- scroll bars: the page shows a thumb once it moves, and every region
   inside it is thin, faint at rest, darker under the pointer ---- */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 9px; height: 9px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-corner { background: transparent; }
  ::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    background-clip: padding-box;
    background-color: color-mix(in srgb, var(--ink) 18%, transparent);
  }
  pre:hover::-webkit-scrollbar-thumb,
  .tbl:hover::-webkit-scrollbar-thumb,
  .side:hover::-webkit-scrollbar-thumb,
  .board:hover::-webkit-scrollbar-thumb,
  .log:hover::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--ink) 36%, transparent); }
  html::-webkit-scrollbar { width: 10px; }
  html::-webkit-scrollbar-thumb {
    border-width: 3px;
    background-color: color-mix(in srgb, var(--ink) 26%, transparent);
  }
  html::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--ink) 44%, transparent); }
  /* at the top of a page there is nothing to move toward */
  html.at-top::-webkit-scrollbar-thumb { background-color: transparent; }
}
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 26%, transparent) transparent; }
  html.at-top { scrollbar-color: transparent transparent; }
  pre, .tbl, .side, .board, .log {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ink) 20%, transparent) transparent;
  }
}

/* ---- a page that stops moving when the reader asks it to ---- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}