/* Tokens now live in css/verity.css (reference theme) + css/sections.css (bridge). */

/* ---------- One family: Inter, across the whole site including the hero. ---------- */

:root {
  --font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-ui: 'Inter', 'Sohne', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --shell: 1200px;
  --gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-paper-white);
  color: var(--color-ink-black);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--font-weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* clip, not hidden — hidden makes body a scroll container, which freezes view() timelines */
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

/* ---------- Display type: serif reserved for hero only; sections use Inter Light.
   These are fallbacks; sections.css overrides with Inter for non-hero headings. ---- */
.display, .h-lg, .h-md {
  font-family: var(--font-display);
  font-weight: 400;
  margin: 0;
}
.display { font-size: var(--text-display);    line-height: 1.10; letter-spacing: var(--tracking-display); }
.h-lg    { font-size: var(--text-heading-lg); line-height: 1.10; letter-spacing: var(--tracking-heading-lg); }
.h-md    { font-size: var(--text-heading);    line-height: 1.16; letter-spacing: var(--tracking-heading); }
.display em, .h-lg em, .h-md em { font-style: italic; }

/* ---------- Sans hierarchy: never above 20px body, never above 500 ---------- */
.sub      { font-size: var(--text-body-lg); line-height: var(--leading-body-lg); font-weight: var(--font-weight-regular); color: var(--color-slate-gray); margin: 0; }
.body     { font-size: var(--text-body);    line-height: var(--leading-body);    margin: 0; }
.caption  { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-slate-gray); margin: 0; }
.h-sm     { font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); letter-spacing: var(--tracking-heading-sm); font-weight: 300; margin: 0; }

/* ---------- Eyebrow: 10.5px sans + dot (sections.css overrides the legacy chevron) ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-caption); font-weight: var(--font-weight-w450);
  color: var(--color-ink-black);
}
.eyebrow--onDark { color: var(--color-paper-white); }

/* ---------- Layout ---------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.band { position: relative; padding-block: var(--spacing-160); }
.band--fog   { background: var(--color-fog-white); }
.band--mist  { background: var(--color-mist-gray); }
.band--dark  { background: var(--color-ink-black); color: var(--color-paper-white); }
.band--tint  { background: var(--accent-a08); }

/* ---------- Buttons: pill, flat ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: auto; padding: 12px 22px; border-radius: var(--r-control);
  font-size: 14px; font-weight: 500;
  transition: transform 420ms cubic-bezier(.22,.61,.36,1), background-color 420ms cubic-bezier(.22,.61,.36,1), opacity 420ms cubic-bezier(.22,.61,.36,1);
}
.btn--fill  { background: var(--color-ink-black); color: var(--color-paper-white); }
.btn--fill:hover { background: color-mix(in srgb, var(--ink) 86%, var(--surface)); }
.btn--ghost { background: transparent; color: var(--color-ink-black); }
.btn--ghost:hover { color: var(--color-slate-gray); }
.btn--onDark.btn--fill { background: var(--color-paper-white); color: var(--color-ink-black); }
.btn--onDark.btn--ghost { color: var(--color-paper-white); }

/* ---------- Floating product artifact ---------- */
/* Floating hero artifacts are ELEVATED cards: radius 20. Content/section cards use 24. */
.artifact {
  background: var(--color-paper-white);
  border-radius: var(--radius-elevatedcards);
  box-shadow: var(--shadow-subtle);
  overflow: hidden;
}
.artifact--elevated { box-shadow: var(--shadow-subtle-2); border-radius: var(--radius-elevatedcards); }

/* ---------- Accent surface: peach, once per viewport, sienna text ---------- */
.accent {
  background: var(--color-blush-peach);
  color: var(--color-sienna-brown);
  border-radius: var(--radius-cards);
}

/* ---------- Scroll reveal primitives (see js/motion.js) ---------- */
.reveal-word { display: inline-block; opacity: 0; transform: translateY(0.22em); }
.is-in .reveal-word { opacity: 1; transform: none; transition: opacity 700ms cubic-bezier(.22,.61,.36,1), transform 700ms cubic-bezier(.22,.61,.36,1); }
.rise { opacity: 0; transform: translateY(18px); }
.is-in.rise, .is-in .rise { opacity: 1; transform: none; transition: opacity 640ms cubic-bezier(.22,.61,.36,1) var(--d, 0ms), transform 640ms cubic-bezier(.22,.61,.36,1) var(--d, 0ms); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 1ms !important; transition-duration: 1ms !important; }
  .reveal-word, .rise { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive display steps ---------- */
@media (max-width: 1080px) {
  :root { --text-display: 64px; --tracking-display: -1.4px; --text-heading-lg: 44px; --text-heading: 34px; }
  .band { padding-block: var(--spacing-128); }
}
@media (max-width: 720px) {
  :root { --text-display: 44px; --tracking-display: -0.9px; --text-heading-lg: 34px; --text-heading: 28px; }
  .band { padding-block: var(--spacing-96); }
}