/* Recurz base: element defaults and the type scale. Needs tokens.css first.
   Fonts are loaded by the app; see the README for the exact <link>. */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--rz-ground);
  color: var(--rz-ink);
  font: var(--rz-text-body);
  font-feature-settings: "kern";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings: sentence case, serif, balanced. Never all-caps condensed. */
h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--rz-font-display);
  font-weight: 600;
  text-wrap: balance;
  color: var(--rz-ink);
}
h1 { font: var(--rz-text-display); letter-spacing: var(--rz-text-display-tracking); }
h2 { font: var(--rz-text-title); letter-spacing: var(--rz-text-title-tracking); }
h3,
h4 { font: var(--rz-text-heading); }

p { margin: 0; }

/* The seven sizes as classes, for markup that can't use the element defaults. */
.rz-display { font: var(--rz-text-display); letter-spacing: var(--rz-text-display-tracking); text-wrap: balance; }
.rz-title { font: var(--rz-text-title); letter-spacing: var(--rz-text-title-tracking); text-wrap: balance; }
.rz-heading { font: var(--rz-text-heading); }
.rz-body { font: var(--rz-text-body); }
.rz-small { font: var(--rz-text-small); }
.rz-data { font: var(--rz-text-data); font-variant-numeric: tabular-nums; }
.rz-label {
  font: var(--rz-text-label);
  letter-spacing: var(--rz-text-label-tracking);
  text-transform: uppercase;
  color: var(--rz-muted);
}
.rz-muted { color: var(--rz-muted); }
.rz-mono { font-family: var(--rz-font-mono); }

/* A big number: display face, title size, tabular. */
.rz-figure {
  font: 500 var(--rz-text-title-size)/1.1 var(--rz-font-display);
  font-variant-numeric: tabular-nums;
}

/* Tabular numbers wherever data lines up. */
.rz-data,
.rz-num,
table,
time,
kbd,
code,
samp,
pre {
  font-variant-numeric: tabular-nums;
}

code,
kbd,
samp,
pre,
.rz-data,
.rz-mono {
  font-family: var(--rz-font-mono);
  font-variant-ligatures: none;
}
code {
  font-size: 0.86em;
  background: var(--rz-sunken);
  padding: 0.08em 0.38em;
  border-radius: var(--rz-radius-sm);
  overflow-wrap: anywhere;
}
pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

/* Links: chrome colour, quiet underline that firms up on hover. */
a {
  color: var(--rz-link);
  text-decoration-line: underline;
  text-decoration-color: var(--rz-link-underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-color: currentColor;
}

/* One focus ring everywhere: 2px in the chrome colour. */
:focus-visible {
  outline: 2px solid var(--rz-focus);
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}

::selection {
  background: var(--rz-selection);
  color: inherit;
}

hr {
  border: 0;
  border-top: 1px solid var(--rz-line);
  margin: var(--rz-space-24) 0;
}

img,
svg {
  max-width: 100%;
}

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