/**
 * base.css — element defaults and readable type rhythm.
 * Base font size uses step-0 so all rem spacing scales predictably.
 */
html {
  font-size: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-step-0);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background: var(--color-bg);
}

/* Headings: one visual scale; one h1 per page remains a content rule in HTML. */
h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

h1 {
  font-size: var(--text-step-5);
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--text-step-3);
  letter-spacing: -0.015em;
}

h3 {
  font-size: var(--text-step-2);
}

h4 {
  font-size: var(--text-step-1);
}

p {
  margin: 0 0 var(--space-5);
  max-width: var(--max-width-prose);
}

ul,
ol {
  margin: 0 0 var(--space-5);
  padding-left: 1.35em;
  max-width: var(--max-width-prose);
}

li {
  margin-bottom: var(--space-2);
  line-height: var(--line-height-list);
}

li:last-child {
  margin-bottom: 0;
}

a {
  color: var(--color-link);
  text-decoration-skip-ink: auto;
  text-underline-offset: 0.15em;
  transition: color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}

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

a:active {
  color: var(--color-link-active);
}

/* Visited: do not target .button or .button-link—those are styled in components.css for all
   link states. Global visited purple on filled/outline CTAs was unreadable (Directive #19). */
a:visited:not(.button):not(.button-link) {
  color: var(--color-link-visited);
}

/* Focus: visible ring for keyboard users only (WCAG 2.4.7 Focus Visible). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

button:focus-visible:not(:disabled),
.button:focus-visible:not([aria-disabled="true"]) {
  box-shadow: var(--shadow-focus);
}

/* Links styled as buttons: no underline; ring uses outline + shadow for contrast on any background. */
a.button,
a.button-link {
  text-decoration: none;
}

a.button:focus-visible,
a.button-link:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
  box-shadow: var(--shadow-focus);
}

address {
  font-style: normal;
  line-height: var(--line-height-snug);
}

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--color-surface-subtle);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

/**
 * Skip link: first focusable control; appears on focus so keyboard users
 * bypass repetitive header/nav (WCAG 2.4.1 Bypass Blocks).
 */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: 0;
  transform: translateY(-120%);
  z-index: 9999;
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(var(--space-4));
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}