/* Headroom's tokens, ported from DESIGN.md › Tokens in the Headroom repo (the app's are in
   mac/Headroom/Design/Theme.swift). Change a token there and here in the same commit: nothing else keeps
   them in step.

   The site ships no JavaScript, so nothing ever writes data-theme: the prefers-color-scheme block below *is*
   the dark theme, and it redefines every colour, not a few. Tare's site learned that from a heading that
   measured 1.08:1 on its wash. The data-theme blocks are there for a browser that sets one. */

:root {
  --hr-bg: #F4F5F7;
  --hr-panel: #FFFFFF;
  --hr-line: #E2E5EA;
  --hr-text: #111418;
  --hr-muted: #5E6570;
  --hr-faint: #9AA1AB;
  --hr-accent: #0A7EA4;
  --hr-accent-bg: rgba(10, 126, 164, .10);
  --hr-on-accent: #FFFFFF;
  --hr-ok: #0F8A5F;
  --hr-warn: #B26A00;
  --hr-crit: #C8322A;

  --hr-sans: Geist, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --hr-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --hr-radius-panel: 14px;
  --hr-radius-hero: 20px;
  --hr-radius-button: 10px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hr-bg: #0B0D10;
    --hr-panel: #101318;
    --hr-line: #20252D;
    --hr-text: #E8EAED;
    --hr-muted: #8A919C;
    --hr-faint: #5A616B;
    --hr-accent: #4CC9F0;
    --hr-accent-bg: rgba(76, 201, 240, .12);
    --hr-on-accent: #0B0D10;
    --hr-ok: #3DDC97;
    --hr-warn: #FFB020;
    --hr-crit: #FF5A4E;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --hr-bg: #0B0D10;
  --hr-panel: #101318;
  --hr-line: #20252D;
  --hr-text: #E8EAED;
  --hr-muted: #8A919C;
  --hr-faint: #5A616B;
  --hr-accent: #4CC9F0;
  --hr-accent-bg: rgba(76, 201, 240, .12);
  --hr-on-accent: #0B0D10;
  --hr-ok: #3DDC97;
  --hr-warn: #FFB020;
  --hr-crit: #FF5A4E;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, p, figure { margin: 0; }
body { -webkit-font-smoothing: antialiased; }