:root {
  --tone-0: hsl(0 0% 100%);
  --tone-1: hsl(220 20% 97%);
  --tone-2: hsl(220 18% 93%);
  --tone-3: hsl(220 14% 86%);
  --tone-4: hsl(220 10% 72%);
  --tone-5: hsl(220 8% 54%);
  --tone-6: hsl(220 10% 30%);
  --tone-7: hsl(220 12% 18%);
  --tone-8: hsl(220 14% 10%);

  --surface-app: var(--tone-1);
  --surface-panel: var(--tone-0);
  --surface-subtle: var(--tone-2);
  --surface-active: color-mix(in srgb, var(--tone-3) 70%, var(--tone-2));

  --border-subtle: color-mix(in srgb, var(--tone-4) 34%, transparent);
  --border-strong: color-mix(in srgb, var(--tone-5) 42%, transparent);

  --text-strong: var(--tone-8);
  --text-muted: var(--tone-6);
  --text-soft: var(--tone-5);

  --focus-ring: hsl(215 55% 42%);
  --focus-offset: 1px;

  --meter-low: hsl(200 84% 47%);
  --meter-high: hsl(42 92% 53%);
  --meter-clip: hsl(8 80% 56%);

  --measure-default: 75ch;
  --measure-compact: 42ch;
}

:root[data-theme="dark"] {
  --tone-0: hsl(220 12% 15%);
  --tone-1: hsl(220 14% 12%);
  --tone-2: hsl(220 10% 18%);
  --tone-3: hsl(220 9% 26%);
  --tone-4: hsl(220 10% 44%);
  --tone-5: hsl(220 12% 64%);
  --tone-6: hsl(220 16% 78%);
  --tone-7: hsl(220 20% 88%);
  --tone-8: hsl(220 22% 94%);

  --surface-app: var(--tone-1);
  --surface-panel: var(--tone-0);
  --surface-subtle: var(--tone-2);
  --surface-active: color-mix(in srgb, var(--tone-3) 74%, var(--tone-2));

    --border-subtle: color-mix(in srgb, var(--tone-4) 44%, transparent);
    --border-strong: color-mix(in srgb, var(--tone-5) 48%, transparent);

  --text-strong: var(--tone-8);
  --text-muted: var(--tone-6);
  --text-soft: var(--tone-5);

  --focus-ring: hsl(210 76% 64%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tone-0: hsl(220 12% 15%);
    --tone-1: hsl(220 14% 12%);
    --tone-2: hsl(220 10% 18%);
    --tone-3: hsl(220 9% 26%);
    --tone-4: hsl(220 10% 44%);
    --tone-5: hsl(220 12% 64%);
    --tone-6: hsl(220 16% 78%);
    --tone-7: hsl(220 20% 88%);
    --tone-8: hsl(220 22% 94%);

    --surface-app: var(--tone-1);
    --surface-panel: var(--tone-0);
    --surface-subtle: var(--tone-2);
    --surface-active: color-mix(in srgb, var(--tone-3) 74%, var(--tone-2));

    --border-subtle: color-mix(in srgb, var(--tone-4) 44%, transparent);
    --border-strong: color-mix(in srgb, var(--tone-5) 48%, transparent);

    --text-strong: var(--tone-8);
    --text-muted: var(--tone-6);
    --text-soft: var(--tone-5);

    --focus-ring: hsl(210 76% 64%);
  }
}

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

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--surface-app);
  color: var(--text-strong);
  font-family: "IBM Plex Sans", "Source Sans 3", "Avenir Next", sans-serif;
  font-size: var(--step-0);
  line-height: 1.35;
  text-rendering: geometricPrecision;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 550;
  line-height: 1.2;
  margin-block: 0;
}

p,
ul,
ol,
dl {
  margin-block: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: var(--border-thick) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-med: 1ms;
  }
}