/* Eagle Vision IT — Base Styles
   Reset, root defaults, typography scale. */

/* Both @imports removed — each one was a serial round trip that blocked
   rendering, and neither was buying anything a <link> doesn't.

   The Google Fonts import is now assets/css/fonts.css, self-hosted; see
   that file for why. The tokens.css import was pure duplication: every
   page already links tokens.css ahead of base.css, so it was fetched
   twice, and the import form meant base.css had to be parsed before the
   second fetch could even begin.

   Both are now plain <link> tags in each page's <head>, which the
   browser's preload scanner finds in the initial HTML and downloads in
   parallel. Order in the cascade is unchanged. */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ── Typography ──────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-primary);
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.2rem, 5vw, var(--text-6xl)); }
h2 { font-size: clamp(1.75rem, 3.5vw, var(--text-4xl)); }
h3 { font-size: clamp(1.25rem, 2.5vw, var(--text-2xl)); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p {
  color: var(--color-muted);
  line-height: var(--leading-relaxed);
  max-width: 68ch;
}

/* Links use the text-safe blue, not --color-secondary: the raw brand blue
   is 2.83:1 on white and fails AA at every text size. See tokens.css. */
a {
  color: var(--color-secondary-text);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover { color: var(--color-accent); }

/* WCAG 1.4.1 (Use of Colour): a link sitting inside a block of prose
   cannot be identified by colour alone. The text-safe link blue (#1572AC)
   against body text (#667085) is 1.05:1 — the two are almost exactly
   equal in luminance, so in greyscale the link is invisible. That is far
   below the 3:1 a colour-only distinction needs, so prose links are
   underlined. (Darkening the link for AA contrast against the *background*
   made it closer to the body text, so this underline matters more now,
   not less.)

   Scoped to <p> on purpose. Lists of links (nav, footer, card CTAs) are
   not text blocks — the user is not scanning prose for them — and
   underlining those would change the design without an a11y gain. */
p a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

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

strong { font-weight: var(--weight-semibold); color: var(--color-text); }
em { font-style: italic; }

ul, ol { padding-left: var(--space-5); }
li { line-height: var(--leading-relaxed); }

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

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

button { cursor: pointer; }

/* ── Focus utilities ─────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ── Selection ───────────────────────────────────────── */
::selection {
  background-color: var(--color-accent);
  color: var(--color-white);
}

/* ── Scroll margin for anchored sections ─────────────── */
[id] { scroll-margin-top: calc(var(--nav-height) + 1rem); }