html {
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--bg-app);
  background-color: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--cyan-a56);
  color: var(--void-0);
}

a {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: var(--border-hair) solid var(--border-muted);
}

a:hover {
  color: var(--fg-emphasis);
  border-bottom-color: var(--border-strong);
  text-shadow: var(--text-glow);
}

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

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--surface-inset); border: 1px solid var(--line-quiet); }
::-webkit-scrollbar-thumb { background: var(--cyan-a32); border: 1px solid var(--line-default); }
::-webkit-scrollbar-thumb:hover { background: var(--cyan-a56); }

/**
 * Windows high-contrast / forced-colors. Glow, glass and tinted fills are all removed by
 * the OS, so the language must survive on borders and system colours alone: every surface
 * gets a real border, and anything that was communicated by a fill becomes a border too.
 */
@media (forced-colors: active) {
  :root {
    --bg-canvas: Canvas;
    --bg-app: Canvas;
    --bg-surface: Canvas;
    --bg-surface-raised: Canvas;
    --bg-sunken: Canvas;
    --bg-glass: Canvas;
    --bg-overlay: Canvas;
    --fg-default: CanvasText;
    --fg-emphasis: CanvasText;
    --fg-muted: CanvasText;
    --fg-subtle: GrayText;
    --fg-disabled: GrayText;
    --fg-on-accent: Canvas;
    --fg-link: LinkText;
    --border-default: CanvasText;
    --border-muted: CanvasText;
    --border-hairline: CanvasText;
    --border-strong: CanvasText;
    --border-focus: Highlight;
    --accent-bg: Highlight;
    --accent-fg: Highlight;
    --accent-border: Highlight;
    --state-focus-ring: Highlight;
    --state-hover-bg: Canvas;
    --state-selected-bg: Highlight;
    --glow-sm: none; /* @kind shadow */
    --glow-md: none; /* @kind shadow */
    --glow-lg: none; /* @kind shadow */
    --text-glow: none; /* @kind shadow */
    --text-glow-strong: none; /* @kind shadow */
    --scanlines: none; /* @kind other */
    --grid-fine-image: none; /* @kind other */
  }
  /* A fill the OS erased still has to read as a boundary. */
  * {
    text-shadow: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  button,
  [role="button"],
  input,
  select,
  textarea,
  [role="listbox"],
  [role="menu"],
  [role="dialog"],
  [role="tooltip"] {
    border: 1px solid CanvasText !important;
    forced-color-adjust: none;
    background: Canvas !important;
    color: CanvasText !important;
  }
  :focus-visible {
    outline: 2px solid Highlight !important;
    outline-offset: 2px;
  }
}

/**
 * Zoom to 200 % must not clip anything. Nothing in the system may set a viewport-unit
 * height on a text container; these two rules catch the common regressions.
 */
@media (max-width: 640px) {
  :root { --text-display-tracking: 0.12em; }
}