/* ============================================================
   Global base — Igloo / Heliomed
   Order of import (BaseLayout): fonts.css -> tokens.css -> global.css
   ============================================================ */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  min-height: 100dvh;
  overflow-x: hidden;
}

img, picture, svg, video, canvas { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }

::selection { background: var(--yellow); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--blue-600);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---- Headings / type ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  color: var(--blue);
  text-wrap: balance;
}
h1 { font-size: var(--fs-3xl); letter-spacing: -0.035em; }
h2 { font-size: var(--fs-2xl); letter-spacing: -0.03em; }
h3 { font-size: var(--fs-lg); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-md); line-height: var(--lh-snug); letter-spacing: -0.015em; }
p { text-wrap: pretty; }

a { color: var(--blue-700); text-decoration-color: color-mix(in srgb, var(--blue-700) 35%, transparent); text-underline-offset: 0.18em; transition: color var(--dur-fast) ease; }
a:hover { color: var(--blue-600); }

strong { font-weight: 600; color: var(--ink); }

/* Data / measurement voice */
.mono { font-family: var(--font-mono); font-feature-settings: 'tnum' 1; }

/* ---- Layout primitives ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: var(--container-wide); }
.section { padding-block: var(--section-y); }
.stack > * + * { margin-top: var(--space-4); }
.lede { font-size: var(--fs-md); color: var(--ink-muted); max-width: 54ch; line-height: 1.5; }

/* Section intro: a named label + heading. Used deliberately, not on every section. */
.section-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-700);
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
}
.section-label::before {
  content: '';
  width: 1.6em; height: 2px;
  background: var(--yellow);
}

/* ---- Signature: measurement-tick rule ---- */
.tick-rule {
  height: 14px;
  border: 0;
  background-image: repeating-linear-gradient(
    to right,
    var(--line-strong) 0, var(--line-strong) 1px,
    transparent 1px, transparent 11px
  );
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  opacity: 0.9;
}
.tick-rule--accent {
  background-image: repeating-linear-gradient(
    to right,
    var(--blue-700) 0, var(--blue-700) 1px,
    transparent 1px, transparent 11px
  );
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: -0.005em;
  padding: 0.85em 1.4em;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out-quart),
              background var(--dur-fast) ease, color var(--dur-fast) ease,
              box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--yellow); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--yellow-deep); color: var(--ink); box-shadow: var(--shadow-md), var(--glow-yellow); }
.btn--solid { background: var(--blue); color: var(--on-dark); }
.btn--solid:hover { background: var(--blue-950); color: #fff; }
.btn--ghost { background: transparent; color: var(--blue); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--blue); background: var(--blue-50); color: var(--blue); }
.btn--lg { font-size: var(--fs-base); padding: 1em 1.7em; }
.btn--on-dark { background: var(--yellow); color: var(--ink); }
.btn--on-dark.btn--ghost { background: transparent; color: var(--on-dark); border-color: var(--on-dark-line); }
.btn--on-dark.btn--ghost:hover { border-color: var(--on-dark); background: rgba(255,255,255,0.06); color: #fff; }

/* ---- Dark-blue surface ---- */
.surface-dark { background: var(--blue-950); color: var(--on-dark); }
.surface-dark h1, .surface-dark h2, .surface-dark h3, .surface-dark h4 { color: #fff; }
.surface-dark .lede, .surface-dark p { color: var(--on-dark-muted); }
.surface-dark a { color: var(--yellow); }
.surface-blue { background: var(--blue); color: var(--on-dark); }
.surface-tint { background: var(--blue-50); }

/* ---- Badges (certifications, status) ---- */
.badge {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.35em 0.7em;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--blue-700);
  background: var(--surface);
}

/* ---- Prose (blog + legal) ---- */
.prose { max-width: var(--measure); color: var(--ink); font-size: var(--fs-base); line-height: 1.72; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size: var(--fs-xl); margin-top: 1.8em; }
.prose h3 { font-size: var(--fs-lg); margin-top: 1.5em; }
.prose h2 + *, .prose h3 + * { margin-top: 0.6em; }
.prose a { color: var(--blue-700); text-decoration: underline; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }
.prose img { border-radius: var(--r-md); margin-block: 1.6em; box-shadow: var(--shadow-md); }
.prose blockquote {
  border-left: 3px solid var(--yellow);
  padding-left: 1.1em;
  font-size: var(--fs-md);
  color: var(--ink-muted);
  font-style: italic;
}
.prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface-2); padding: 0.15em 0.4em; border-radius: 4px; }

/* ---- Forms ---- */
.field { display: flex; flex-direction: column; gap: 0.4em; }
.field > label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.field > label .req { color: var(--err); }
.input, .textarea, .select {
  width: 100%;
  padding: 0.8em 0.95em;
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  color: var(--ink);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--blue-700);
  box-shadow: 0 0 0 4px rgba(0, 85, 127, 0.12);
}
.textarea { min-height: 9rem; resize: vertical; }
.check { display: flex; gap: 0.7em; align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-muted); }
.check input[type='checkbox'] { width: 1.15rem; height: 1.15rem; margin-top: 0.15em; accent-color: var(--blue); flex: none; }
.form-note { font-size: var(--fs-sm); }
.form-note--ok  { color: var(--ok);  background: var(--ok-bg);  padding: 0.8em 1em; border-radius: var(--r-md); }
.form-note--err { color: var(--err); background: var(--err-bg); padding: 0.8em 1em; border-radius: var(--r-md); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Accessibility helpers ---- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 0.75rem; top: -3rem; z-index: var(--z-toast);
  background: var(--blue); color: #fff; padding: 0.6em 1em; border-radius: var(--r-md);
  transition: top var(--dur-fast) ease;
}
.skip-link:focus { top: 0.75rem; color: #fff; }

/* ---- Reveal (motion.dev drives it; default state stays visible) ---- */
html.js [data-reveal] { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1 !important; transform: none !important; }
}