/**
 * base.css - Global element defaults & typography
 */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: var(--lh-relaxed);
  color: var(--color-on-surface);
  background-color: var(--color-background);
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  font-weight: 700;
  color: var(--color-deep-forest);
}

h1 { font-size: var(--fs-display-xl); }

h2 {
  font-family: var(--font-section-title);
  font-size: var(--fs-display-lg);
  font-weight: 400;
  line-height: 1.3;
}

h3 {
  font-family: var(--font-section-title);
  font-size: var(--fs-display-md);
  font-weight: 400;
  line-height: 1.3;
}
h4 { font-size: var(--fs-headline); }

p {
  color: var(--color-on-surface-variant);
}

strong {
  font-weight: 600;
}

blockquote {
  font-family: var(--font-display);
}

svg {
  stroke-width: 1.6;
}

::selection {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* Accessible focus ring across the site */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
  top: var(--space-sm);
}