/*
 * The ground rules every element starts from: box sizing, the page's font and background,
 * headings, links, the keyboard focus ring and the visually hidden helper. Used by the whole
 * page, on every view.
 * Colours, fonts and spacing come from the custom properties in tokens.css; this file
 * never writes a colour value (StyleRulesTests). More in
 * docs/ADR-010-the-palette-borrowed-from-theyard.md.
 */

/* #region base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  font-variant-numeric: tabular-nums;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--gradient-ground);
  display: flex;
  flex-direction: column;
}

h1,
h2,
h3 {
  color: var(--color-heading);
  letter-spacing: var(--title-tracking);
  line-height: 1.25;
  margin: 0 0 var(--space-3);
}

a {
  color: var(--color-accent);
}

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* #endregion base */