/* ============================================================
   base.css — Flex Europa · finaldesign
   Typography defaults, links, focus, skip link, body rhythm,
   the signature mono technical label, and the reveal-on-scroll
   base state (JS adds .is-revealed; no-JS shows everything).
   ============================================================ */

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  background-color: var(--color-bg);
  letter-spacing: var(--tracking-normal);
}

/* ---- Headings — machined grotesque, tight tracking, fluid ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  line-height: 1.06;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  text-wrap: balance;
}
h1 { font-size: clamp(var(--fs-3xl), 6vw, 76px); }
h2 { font-size: clamp(var(--fs-2xl), 4.5vw, var(--fs-3xl)); }
h3 { font-size: clamp(var(--fs-xl), 3vw, var(--fs-2xl)); line-height: 1.12; }
h4 { font-size: clamp(var(--fs-lg), 2.4vw, var(--fs-xl)); line-height: 1.2; }
h5 { font-size: var(--fs-lg); line-height: 1.3; }
h6 { font-size: var(--fs-md); line-height: 1.3; }

p { color: var(--color-text); }
strong, b { font-weight: var(--fw-semibold); }

/* ---- Links — underline offset, teal on hover (accessible) ---- */
a { color: var(--color-accent-strong); transition: color var(--transition-fast); }
a:hover { color: var(--color-accent-deep); }

/* ---- Selection ---- */
/* --color-accent-strong, not --color-accent: white on the logo teal is
   3.02:1, and selected text is text. Same correction as the buttons. */
::selection { background: var(--color-accent-strong); color: var(--color-text-inverse); }

/* ---- The signature MONO technical label / eyebrow / spec tag ---- */
.mono-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.mono-label--accent { color: var(--color-accent-strong); }
.mono-label--inverse { color: rgba(255, 255, 255, .82); }
.mono-label--on-dark { color: var(--color-accent-on-dark); }

/* ---- Focus visible — distinct everywhere; dark-surface variant ---- */
:focus-visible {
  outline: 2px solid var(--color-accent-strong);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
/* On dark/graphite/hero surfaces, use the brightened teal ring */
.site-header:not(.is-stuck) :focus-visible,
.hero :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--color-accent-on-dark);
}

/* ---- Skip link — first focusable element ---- */
.skip-link {
  /* 44px target (it measured 222x37). Off-screen until focused, so this
     is invisible until it matters. */
  display: inline-flex;
  align-items: center;
  min-block-size: var(--step-size);
  position: absolute;
  inset-block-start: var(--space-sm);
  inset-inline-start: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-accent-strong);
  color: var(--color-text-inverse);
  border-radius: var(--radius-control);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  z-index: var(--z-skip);
  transform: translateY(-200%);
  transition: transform var(--transition-base);
}
.skip-link:focus { transform: translateY(0); }

/* ---- Reveal-on-scroll base state (animations.js flips .is-revealed) ---- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-revealed { opacity: 1; transform: none; }

/* No-JS and reduced-motion: never hide content behind the reveal state */
.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}