/* Base element styling shared by every screen. */

body {
  background:
    radial-gradient(circle at 72% -10%, rgba(35, 135, 187, .14), transparent 30rem),
    linear-gradient(180deg, var(--canvas-deep), var(--canvas) 34rem);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--ivory);
  letter-spacing: 0;
}

h1 {
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
}

h2 {
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}

h3 {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

p {
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

a {
  transition: color var(--duration-fast) var(--ease-settle);
}

a:hover {
  color: var(--ivory);
}

/* Real, visible focus everywhere -- never the browser default, never nothing. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

h1[tabindex='-1']:focus {
  outline: none;
}

::selection {
  background: var(--plum-wash);
  color: var(--ivory);
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-quiet);
}