/* ==========================================================================
   VP Design System — Base / Reset / Type Scale
   Depends on: fonts.css, tokens.css
   ========================================================================== */

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
}

/* --------------------------------------------------------------------------
   Fluid root — the whole rem scale rides on viewport width.
   Technique adopted from Lumora (`index.html` :root media block). One type
   scale then covers every breakpoint: nothing below needs a per-breakpoint
   font-size override. See ADR-0004.
   -------------------------------------------------------------------------- */
/* The .98 offsets are load-bearing. Component queries in this system are all
   `min-width`, so an exact `max-width: 640px` rung would match at the SAME
   viewport width as `min-width: 640px` — the root would jump to the mobile
   scale (1rem = 28.4px) while the desktop row layout was already active. That
   collision produced 851px of content in a 640px viewport. Lumora's ladder has
   the same boundary; these offsets are the fix. */
@media (max-width: 1920px)   { html { font-size: 0.833333vw; } }
@media (max-width: 1439.98px){ html { font-size: 1.111111vw; } }
@media (max-width: 1023.98px){ html { font-size: 1.5625vw; } }
@media (max-width: 639.98px) { html { font-size: 4.444444vw; } }

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  overflow-x: hidden;
}

a      { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }
img, svg, video, canvas { display: block; max-width: 100%; }
input, textarea, select { font: inherit; color: inherit; }

/* --------------------------------------------------------------------------
   Accessibility primitives
   -------------------------------------------------------------------------- */
.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;
}

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

.skip-link {
  position: absolute; left: -9999px; top: var(--space-4); z-index: var(--z-header);
  border-radius: var(--radius-control);
  background: var(--ink); padding: var(--space-2) var(--space-4);
  font-size: var(--text-body-sm); color: #fff;
}
.skip-link:focus { position: fixed; left: var(--space-4); }

/* Motion opt-out. Everything in motion.css is written so that killing
   animation/transition leaves the REVEALED state visible, never a blank page. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Layout container — class name adopted verbatim from Lumora
   -------------------------------------------------------------------------- */
.shell {
  max-width: var(--container-shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 640px) { .shell { padding-inline: var(--gutter-lg); } }

/* ==========================================================================
   TYPE SCALE
   Two families, two jobs:
     .display / h1 / h2  -> Neue Montreal, weight 300. Size carries hierarchy.
     h3..h6, body, UI    -> Onest, weight 400-600. Weight carries hierarchy.
   Full rationale: docs/foundations/typography.md
   ========================================================================== */

.display,
h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: var(--text-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

h3, .h3 {
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
  font-size: var(--text-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
}

h4, .h4 {
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
  font-size: var(--text-h4);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-snug);
}

h5, .h5 {
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
  font-size: var(--text-h5);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-snug);
}

h6, .h6 {
  font-family: var(--font-ui);
  font-weight: var(--weight-medium);
  font-size: var(--text-h6);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-normal);
}

/* Display emphasis — the one place Neue Montreal Bold is allowed. Reserved
   for the provocative clause inside a display line ("...pensar com ela"). */
.display-em {
  font-weight: var(--weight-bold);
  font-style: normal;
}
.display-quiet { color: var(--subtle); }

.body-lg {
  font-size: var(--text-body-lg);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-normal);
  color: var(--fg-90);
}
.body {
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
}
.body-sm {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-regular);
  line-height: var(--lh-heading);
}

.caption {
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  line-height: var(--lh-heading);
  color: var(--fg-60);
}

.label {
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-60);   /* 4.7:1 — --fg-50 measured 3.4:1 and fails AA */
}

.helper-text {
  font-size: var(--text-helper);
  font-weight: var(--weight-regular);
  line-height: var(--lh-heading);
  color: var(--fg-60);   /* 4.7:1 — --fg-45 measured 2.9:1 and fails AA */
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-normal);
}

/* Measure caps — long-form never exceeds a comfortable line length.
   `.measure` also relaxes leading: at 68ch the eye needs more vertical
   separation to find the next line reliably. */
.measure    { max-width: 68ch; line-height: var(--lh-relaxed); color: var(--fg-80); }
.measure-sm { max-width: 46ch; }
.measure-xs { max-width: 32ch; }