/* ----------------------------------------------------------------
 * Base - global typography, links, layout primitives, buttons.
 * Builds ON the reset; defines what the *unstyled* HTML looks like.
 * ---------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--vq-font-body);
  font-size: var(--vq-text-base);
  line-height: var(--vq-leading-base);
  color: var(--vq-color-ink);
  background: var(--vq-color-bg);
  font-feature-settings: "ss01", "cv01", "kern";
}

/* ---- Headings ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--vq-font-display);
  font-weight: var(--vq-weight-semibold);
  line-height: var(--vq-leading-tight);
  letter-spacing: var(--vq-tracking-tight);
  color: var(--vq-color-ink);
}

h1 { font-size: var(--vq-text-5xl); }
h2 { font-size: var(--vq-text-3xl); }
h3 { font-size: var(--vq-text-2xl); }
h4 { font-size: var(--vq-text-xl);  }
h5 { font-size: var(--vq-text-lg);  }
h6 { font-size: var(--vq-text-base); }

/* ---- Body text ---- */
p {
  color: var(--vq-color-muted);
  margin: 0 0 var(--vq-space-4);
}
p:last-child { margin-bottom: 0; }

/* ---- Links ---- */
a {
  color: var(--vq-color-primary);
  text-decoration-color: rgba(0, 78, 235, 0.4);
  text-underline-offset: 0.18em;
  transition: color var(--vq-duration) var(--vq-ease),
              text-decoration-color var(--vq-duration) var(--vq-ease);
}
a:hover {
  color: var(--vq-color-primary-dark);
  text-decoration-color: var(--vq-color-primary-dark);
}

/* Inline content links - underline by default */
.prose a, p a, li a {
  text-decoration: underline;
}

/* ---- Eyebrows / kickers ---- */
.eyebrow {
  font-family: var(--vq-font-body);
  font-size: var(--vq-text-sm);
  font-weight: var(--vq-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--vq-tracking-eyebrow);
  color: var(--vq-color-primary);
  margin: 0 0 var(--vq-space-3);
}

/* ---- Layout: container ---- */
.container {
  width: 100%;
  max-width: var(--vq-container-base);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}
.container--narrow { max-width: var(--vq-container-narrow); }
.container--wide   { max-width: var(--vq-container-wide); }

/* ---- Layout: section ---- */
.section {
  padding-block: clamp(var(--vq-space-8), 8vw, var(--vq-space-11));
}
.section--tight { padding-block: clamp(var(--vq-space-6), 6vw, var(--vq-space-9)); }

/* Soft-background utility */
.bg-soft { background: var(--vq-color-bg-soft); }
.bg-mute { background: var(--vq-color-bg-mute); }
.bg-dark { background: var(--vq-color-secondary); color: #fff; }
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark p { color: inherit; }

/* ---- Buttons - pill shape, big touch target, matches production ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vq-space-2);
  padding: 1em 1.75em;
  font-family: var(--vq-font-display);
  font-size: var(--vq-text-base);
  font-weight: var(--vq-weight-semibold);
  line-height: 1;
  letter-spacing: -0.005em;
  border-radius: var(--vq-radius-md);
  border: 1.5px solid transparent;
  text-decoration: none !important;
  cursor: pointer;
  transition: background var(--vq-duration) var(--vq-ease),
              color var(--vq-duration) var(--vq-ease),
              border-color var(--vq-duration) var(--vq-ease),
              box-shadow var(--vq-duration) var(--vq-ease),
              transform var(--vq-duration) var(--vq-ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--vq-color-primary);
  border-color: var(--vq-color-primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 78, 235, 0.25);
}
.btn--primary:hover {
  background: var(--vq-color-primary-dark);
  border-color: var(--vq-color-primary-dark);
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 78, 235, 0.35);
}

.btn--ghost {
  background: #fff;
  border-color: var(--vq-color-border);
  color: var(--vq-color-ink);
}
.btn--ghost:hover {
  border-color: var(--vq-color-primary);
  color: var(--vq-color-primary);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.btn--lg { padding: 1.15em 2em; font-size: var(--vq-text-lg); }
.btn--sm { padding: 0.65em 1.15em; font-size: var(--vq-text-sm); }

/* ---- Accessibility helpers ---- */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--vq-space-3);
  background: var(--vq-color-primary);
  color: #fff;
  padding: var(--vq-space-3) var(--vq-space-5);
  border-radius: var(--vq-radius-sm);
  z-index: var(--vq-z-toast);
  font-weight: var(--vq-weight-semibold);
}
.skip-link:focus { top: var(--vq-space-3); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ---- Main landmark ---- */
.main {
  min-height: 60vh;
}

/* ---- Prose - long-form content blocks ---- */
.prose {
  max-width: 70ch;
  font-size: var(--vq-text-lg);
  line-height: var(--vq-leading-loose);
}
.prose h2 { margin-top: var(--vq-space-8); margin-bottom: var(--vq-space-3); }
.prose h3 { margin-top: var(--vq-space-7); margin-bottom: var(--vq-space-2); }
.prose p, .prose ul, .prose ol { margin-bottom: var(--vq-space-4); }
.prose ul, .prose ol { padding-left: 1.5em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: var(--vq-space-2); }
.prose blockquote {
  border-left: 3px solid var(--vq-color-primary);
  padding: var(--vq-space-3) var(--vq-space-5);
  background: var(--vq-color-bg-soft);
  border-radius: 0 var(--vq-radius-md) var(--vq-radius-md) 0;
  margin-block: var(--vq-space-5);
  font-style: italic;
}