/* === Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; height: 100%; }

body {
  background-color: var(--surface-95);
  color: var(--light-90);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100%;
}

img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
ul, ol { list-style: none; }

/* === Skip Link === */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.visually-hidden:focus {
  position: fixed; top: var(--space-8); left: var(--space-8);
  width: auto; height: auto; padding: var(--space-8) var(--space-16);
  margin: 0; overflow: visible; clip: auto; white-space: normal;
  background: var(--primary-100); color: var(--dark-100);
  font-weight: 700; z-index: 9999; border-radius: var(--radius-sm);
}

/* === Layout Containers === */
.container {
  width: 100%;
  max-width: var(--width-max);
  margin: 0 auto;
  padding-left: 5%;
  padding-right: 5%;
}
.container--narrow  { max-width: var(--width-narrow); }
.container--content { max-width: var(--width-content); }
.container--wide    { max-width: var(--width-wide); }

/* === Section Spacing === */
.section {
  padding-top: var(--space-120);
  padding-bottom: var(--space-120);
}
.section--sm {
  padding-top: var(--space-80);
  padding-bottom: var(--space-80);
}
.section--alt { background-color: var(--surface-90); }

/* === Grid System === */
.grid {
  display: grid;
  gap: var(--space-40);
}
.grid--2   { grid-template-columns: repeat(2, 1fr); }
.grid--3   { grid-template-columns: repeat(3, 1fr); }
.grid--4   { grid-template-columns: repeat(4, 1fr); }
.grid--5-7 { grid-template-columns: 5fr 7fr; }
.grid--7-5 { grid-template-columns: 7fr 5fr; }

/* === Spacing Utilities === */
.mt-0   { margin-top: 0; }
.mt-8   { margin-top: var(--space-8); }
.mt-16  { margin-top: var(--space-16); }
.mt-20  { margin-top: var(--space-20); }
.mt-24  { margin-top: var(--space-24); }
.mt-32  { margin-top: var(--space-32); }
.mt-40  { margin-top: var(--space-40); }
.mt-48  { margin-top: var(--space-48); }
.mt-60  { margin-top: 60px; }
.mt-80  { margin-top: var(--space-80); }
.mt-100 { margin-top: var(--space-100); }

.mb-0   { margin-bottom: 0; }
.mb-8   { margin-bottom: var(--space-8); }
.mb-12  { margin-bottom: var(--space-12); }
.mb-16  { margin-bottom: var(--space-16); }
.mb-20  { margin-bottom: var(--space-20); }
.mb-24  { margin-bottom: var(--space-24); }
.mb-32  { margin-bottom: var(--space-32); }
.mb-40  { margin-bottom: var(--space-40); }
.mb-60  { margin-bottom: 60px; }
.mb-80  { margin-bottom: var(--space-80); }

/* === Text Color Utilities === */
.text-default { color: var(--light-90); }
.text-medium  { color: var(--light-80); }
.text-light   { color: var(--light-80); }

/* === Display Utilities === */
.center { text-align: center; }
.m-auto { margin-left: auto; margin-right: auto; }

/* === Layout Utilities === */
.flex-center    { display: flex; align-items: center; justify-content: center; }
.min-h-60vh     { min-height: 60vh; }
.max-w-800      { max-width: 800px; margin-left: auto; margin-right: auto; }
.max-w-700      { max-width: 700px; margin-left: auto; margin-right: auto; }
.max-w-900      { max-width: 900px; margin-left: auto; margin-right: auto; }
.gap-24         { gap: var(--space-24); }
.grid-results   { display: grid; gap: var(--space-24); }
.pl-24          { padding-left: var(--space-24); }
.flex-col-gap-12 { display: flex; flex-direction: column; gap: var(--space-12); }
.btn-row--center { justify-content: center; }
.btn-row--wrap   { flex-wrap: wrap; gap: var(--space-12); }
.is-hidden       { display: none !important; }