:root {
  --hlhh-mission-night: #11191E;
  --hlhh-control-graphite: #20323B;
  --hlhh-instrument-silver: #E9EEF0;
  --hlhh-clean-paper: #FFFFFF;
  --hlhh-calibration-cyan: #3AA7A4;
  --hlhh-signal-yellow: #F0B323;
  --hlhh-body-ink: #18303A;
  --hlhh-muted-ink: #5E7078;
  --hlhh-line: #CBD7DB;
  --hlhh-focus: #3AA7A4;
  --hlhh-shell-width: 1200px;
  --hlhh-gutter: 24px;
  --hlhh-space-1: 8px;
  --hlhh-space-2: 16px;
  --hlhh-space-3: 24px;
  --hlhh-space-4: 32px;
  --hlhh-space-5: 40px;
  --hlhh-space-6: 48px;
  --hlhh-radius-sm: 2px;
  --hlhh-radius-md: 4px;
}

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

html { scroll-behavior: smooth; }

body {
  color: var(--hlhh-body-ink);
  background: var(--hlhh-clean-paper);
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0;
}

h1, h2, h3, h4, h5, h6,
.hlhh-display,
.hlhh-label {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.12;
}

.hlhh-mono { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 0; }

a { color: var(--hlhh-body-ink); }
a:hover { color: var(--hlhh-control-graphite); }

:focus-visible {
  outline: 3px solid var(--hlhh-focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}