:root {
  --ink: #06080f;
  --chrome: #03050a;
  --panel: #0a0e1a;

  --panel-wash: rgba(139, 92, 246, .09);
  --violet: #8b5cf6;
  --blue: #4a7dff;
  --gradient: linear-gradient(100deg, #8b5cf6, #4a7dff);
  --lilac: #a78bfa;
  --signal: #4ade80;

  --text-heading: #e8eaf2;
  --text-body: #9aa5bd;
  --text-label: #7c8aa5;
  --text-timestamp: #4b5670;
  --text-log: #8fa0bd;

  --rule: rgba(255, 255, 255, .08);
  --rule-strong: rgba(255, 255, 255, .13);
  --field-border: rgba(255, 255, 255, .14);
  --field-fill: rgba(255, 255, 255, .04);
  /* Opaque, unlike --field-fill. A select's popup list is painted on a surface of the
     browser's own with no page behind it, so a translucent fill there composites over white
     rather than over --panel, and the list comes out white. */
  --field-surface: #121728;
  /* --field-surface under the violet wash .field:focus applies, mixed rather than layered
     so that a focused select's list stays opaque too. */
  --field-surface-focus: #1b1c36;

  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --size-display: clamp(54px, 8.4vw, 118px);
  --size-body: 17px;
  --size-kicker: 11px;
  --size-micro: 10px;
  --size-log: 12.5px;

  --log-stamp: 128px;
  --log-row: calc(var(--size-log) * 2.05);

  --page-padding: 52px;
  --column-gutter: 52px;
  --chrome-height: 54px;
  --status-height: 38px;
  --control-height: 56px;
  --handle: 7px;

  --ease-snap: cubic-bezier(.16, .84, .28, 1);
}

@media (max-width: 1100px) {
  :root {
    --page-padding: 36px;
    --column-gutter: 32px;
  }
}

@media (max-width: 700px) {
  :root {
    --page-padding: 28px;
    --chrome-height: 48px;
    --size-log: 11px;
    --log-stamp: 112px;
  }
}

/* ---- application controls and the navigation rail ---- */

:root {
  --control-height-sm: 34px;

  --rail-width: 44px;
  --rail-width-open: 248px;
}