/* ==========================================================================
   BASE — Global element styles, typography, layout utilities
   ========================================================================== */

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.5;
  text-wrap: balance;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

label {
  font-family: var(--font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.2;
}

:focus-visible {
  outline: 2px solid var(--green-light);
  outline-offset: 3px;
}

/* Layout container */
.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* Section spacing */
section {
  position: relative;
}

.section-pad {
  padding: 80px 0;
}

/* Global Paragraph Typography */
p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
}

/* Light / Dark Contextual Paragraphs */
.quote p:not(.eyebrow),
.how p:not(.eyebrow),
.coverage-v2 p:not(.eyebrow),
.reviews p:not(.eyebrow),
.final-cta p:not(.eyebrow),
.sect-head--dark p:not(.eyebrow) {
  color: hsla(42, 44%, 92%, 0.7);
}

/* Type Utility Classes */
.text-display {
  font-size: var(--text-display);
  line-height: var(--text-display--line-height);
  letter-spacing: var(--text-display--letter-spacing);
  font-weight: var(--text-display--font-weight);
}

.title-h2 {
  font-size: var(--text-h2);
  line-height: var(--text-h2--line-height);
  letter-spacing: var(--text-h2--letter-spacing);
  font-weight: var(--text-h2--font-weight);
  text-transform: uppercase;
  text-wrap: balance;
}

.text-h3 {
  font-size: var(--text-h3);
  line-height: var(--text-h3--line-height);
  font-weight: var(--text-h3--font-weight);
}

/* Spacing Utilities */
.u-mt-24 {
  margin-top: 24px;
}

.u-mt-30 {
  margin-top: 30px;
}

.u-hidden {
  display: none;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--charcoal);
}

::-webkit-scrollbar-thumb {
  background: var(--green-mid);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--green-light);
}