/* FCMS Pro website - base layer: fonts, reset, typography, a11y primitives.
   Depends on tokens.css (load it first). No component styles here. */

/* Self-hosted Inter (variable). No Google Fonts request: the product promise is
   "no telemetry", and the site keeps it. The file is preloaded from <head>. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-var.woff2") format("woff2");
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* anchored headings must clear the sticky header */
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--surface-0);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: 1.6;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* guards against 320px horizontal scroll from decorative layers */
}

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

/* ---------- Typography ---------- */
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; text-wrap: balance; }
h1 { font-size: var(--fs-3xl); letter-spacing: -0.035em; font-weight: 800; }
h2 { font-size: var(--fs-2xl); letter-spacing: -0.03em; }
h3 { font-size: var(--fs-lg); letter-spacing: -0.015em; line-height: 1.3; }
h4 { font-size: var(--fs-md); line-height: 1.35; }
p { margin: 0; text-wrap: pretty; }
small { font-size: var(--fs-sm); }
strong { font-weight: 650; }

a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { text-decoration-thickness: 2px; }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; }
code {
  padding: 0.12em 0.4em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
}
pre {
  margin: 0;
  padding: var(--sp-4);
  overflow-x: auto;          /* wide code scrolls inside itself, never the page */
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  line-height: 1.55;
}
pre code { padding: 0; background: none; border: 0; font-size: inherit; }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-6) 0; }
::selection { background: var(--accent-soft); color: var(--text); }

/* ---------- Focus: always visible, 3:1+ against both surfaces ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Layout primitives ---------- */
.container {
  width: min(100% - 2 * var(--sp-5), var(--content-max));
  margin-inline: auto;
}
.section { padding-block: clamp(var(--sp-8), 8vw, var(--sp-10)); }
.section--tight { padding-block: clamp(var(--sp-7), 5vw, var(--sp-8)); }
.stack > * + * { margin-top: var(--stack-gap, var(--sp-4)); }
.muted { color: var(--text-muted); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link: first focusable element on every page */
.skip-link {
  position: fixed;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 1000;
  padding: var(--sp-3) var(--sp-4);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* No-JS: anything that needs JS to be visible must opt in with .js on <html>
   (the boot snippet adds it). Reveal animations therefore never hide content
   from crawlers or JS-off visitors. */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Skeleton shimmer for live data (version, size, date) until release.js settles */
.skeleton {
  display: inline-block;
  min-width: 4ch;
  color: transparent !important;
  background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2));
  background-size: 200% 100%;
  border-radius: 6px;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Reduced motion: honour it everywhere ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- Forced colors (Windows High Contrast) ---------- */
@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
  .skeleton { background: GrayText; }
}