/* Base styles — spec §43, §51 */

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

/* Remove default margin/padding */
html, body, h1, h2, h3, h4, h5, h6,
p, ol, ul, li, figure, blockquote { margin: 0; padding: 0; }

/* Root */
html {
  font-size: 100%; /* respects user browser settings */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Body */
body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--line-height-body);
  color: var(--color-ink-800);
  background-color: var(--color-white);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }

/* Headings */
h1 { font-size: var(--text-h1); line-height: var(--line-height-heading); color: var(--color-ink-950); font-weight: 700; }
h2 { font-size: var(--text-h2); line-height: var(--line-height-heading); color: var(--color-ink-950); font-weight: 700; }
h3 { font-size: var(--text-h3); line-height: 1.3; color: var(--color-ink-950); font-weight: 600; }
h4, h5, h6 { line-height: 1.4; color: var(--color-ink-950); font-weight: 600; }

/* Body text */
p { max-width: var(--content-prose); }

/* Links */
a { color: var(--color-teal-600); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { color: var(--color-navy-700); }

/* Skip link — must be first focusable element, spec §50 */
.skip-link {
  position: absolute;
  inset-inline-start: var(--space-4);
  inset-block-start: var(--space-4);
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-4);
  background: var(--color-navy-800);
  color: var(--color-white);
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--transition-fast);
}
.skip-link:focus { transform: translateY(0); }

/* Focus styles — visible, meets WCAG 2.2 spec §51, §66 */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
/* Remove default focus ring when :focus-visible is supported */
:focus:not(:focus-visible) { outline: none; }

/* Images */
img, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Lists */
ul, ol { padding-inline-start: var(--space-6); }
li { margin-block-end: var(--space-1); }

/* Layout container */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* Section spacing */
.section { padding-block: var(--space-20); }
.section--sm { padding-block: var(--space-12); }
.section--lg { padding-block: var(--space-32); }

/* Alternate background sections */
.section--mist { background-color: var(--color-mist-50); }
.section--mist-100 { background-color: var(--color-mist-100); }
.section--navy { background-color: var(--color-navy-800); color: var(--color-white); }
.section--navy h1,
.section--navy h2,
.section--navy h3 { color: var(--color-white); }

/* Eyebrow label above headings */
.eyebrow {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal-600);
  margin-block-end: var(--space-3);
}

/* Prose width constraint */
.prose { max-width: var(--content-prose); }

/* Prevent horizontal overflow at 320px — spec §51 */
body { overflow-x: hidden; }

/* Min touch target — WCAG 2.2 spec §51 */
button, [role="button"], a { min-height: 44px; min-width: 44px; }
nav a, footer a { min-height: auto; min-width: auto; }

/* Reduced motion — spec §45, §51 */
@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;
  }
  .skip-link { transform: none; transition: none; }
}

/* Print baseline — articles and framework content, spec §51 */
@media print {
  .skip-link, header nav, footer, .cta-section { display: none; }
  body { color: #000; background: #fff; font-size: 11pt; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
  h1, h2, h3 { page-break-after: avoid; }
}

/* Utility: visually hidden but accessible to screen readers */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}