/* ==========================================================================
   SurveyIQ — base: reset, document defaults, typography, utilities
   ========================================================================== */

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

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--c-ink-2);
  background: var(--c-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, figure { margin: 0; }

/* Display face on every heading, so a bare <h2> anywhere is already correct.
   Weights and tracking follow the system: 700/-0.5px on the display line,
   700/-0.4px on section titles, 650/-0.2px on subheads. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--c-ink);
  line-height: var(--lh-heading);
}
h1 { font-weight: var(--fw-bold);    letter-spacing: var(--ls-display); }
h2 { font-weight: var(--fw-bold);    letter-spacing: var(--ls-tight); }
h3,
h4 { font-weight: var(--fw-heading); letter-spacing: var(--ls-snug); }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Every CTA in the source is a bare maroon text link, underlined on hover
   rather than always - see .btn--link for the arrow form. */
a { color: var(--c-accent); text-decoration: none; }
a:hover { color: var(--c-accent-hover); text-decoration: underline; text-underline-offset: 2px; }

button, input, textarea, select { font: inherit; color: inherit; margin: 0; }

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

img, svg { display: block; max-width: 100%; }

/* Visible, consistent keyboard focus everywhere. */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

::placeholder { color: var(--c-placeholder); opacity: 1; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--c-swatch-dim);
  border: 3px solid transparent;
  border-radius: var(--r-pill);
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--c-swatch-dim-2); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* --- Typography helpers --------------------------------------------------- */

.mono { font-family: var(--font-mono); }

.gly {
  font-family: var(--font-glyph);
  font-style: normal;
  line-height: 1;
  display: inline-block;
}

/* Mono uppercase section label, e.g. "PAGES", "LIFECYCLE" */
.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-subtle);
}

.h-page {
  font-family: var(--font-display);
  font-size: var(--fs-22);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--c-ink);
}
.h-sect {
  font-family: var(--font-display);
  font-size: var(--fs-17);
  font-weight: var(--fw-heading);
  letter-spacing: var(--ls-snug);
  color: var(--c-ink);
}
/* Card titles are maroon in the system - the one place the accent carries
   meaning rather than decoration. */
.h-card {
  font-family: var(--font-display);
  font-size: var(--fs-15);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  color: var(--c-accent);
}

.text-muted   { color: var(--c-text-muted); }
.text-subtle  { color: var(--c-text-subtle); }
.text-faint   { color: var(--c-text-faint); }
.text-accent  { color: var(--c-accent); }
.text-success { color: var(--c-success); }

.pretty { text-wrap: pretty; }

.truncate {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Layout helpers ------------------------------------------------------- */

.row       { display: flex; align-items: center; }
.col       { display: flex; flex-direction: column; }
.spacer    { margin-left: auto; }
.fill      { flex: 1; min-width: 0; min-height: 0; }
.no-shrink { flex: none; }

.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;
}

.hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}