/* ═══════════════════════════════════════════════════════════════════
 * Quillon v4 — Base (reset + typography)
 * Scope: isolated under /v4/.
 * ═══════════════════════════════════════════════════════════════════ */

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--q-bg-0);
  color: var(--q-text-hi);
  font-family: var(--q-font-sans);
  font-size: var(--q-t-body);
  font-weight: var(--q-fw-regular);
  line-height: var(--q-lh-normal);
  font-feature-settings: "cv11", "ss01", "ss03";  /* Inter stylistic sets: одинарная g, прямая R */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--q-dur-fast) var(--q-ease);
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

p { margin: 0; }

hr {
  border: 0;
  height: 1px;
  background: var(--q-line);
  margin: var(--q-s-7) 0;
}

::selection {
  background: var(--q-accent);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════
 * TYPOGRAPHY CLASSES
 *
 * Inter Variable trick: weight 510 — крепче medium, тоньше semibold.
 * Работает только с variable font (Inter Variable), иначе откат к 500.
 * ═══════════════════════════════════════════════════════════════════ */

.q-h1 {
  font-family: var(--q-font-display);
  font-size: var(--q-t-h1);
  font-weight: var(--q-fw-semibold);
  line-height: var(--q-lh-tight);
  letter-spacing: var(--q-tracking-h1);
  margin: 0;
  font-variation-settings: "opsz" 32;
}

.q-h2 {
  font-family: var(--q-font-display);
  font-size: var(--q-t-h2);
  font-weight: var(--q-fw-linear);
  line-height: var(--q-lh-snug);
  letter-spacing: var(--q-tracking-h2);
  margin: 0;
}

.q-h3 {
  font-family: var(--q-font-display);
  font-size: var(--q-t-h3);
  font-weight: var(--q-fw-linear);
  line-height: 1.2;
  letter-spacing: var(--q-tracking-h3);
  margin: 0;
}

.q-h4 {
  font-family: var(--q-font-display);
  font-size: var(--q-t-h4);
  font-weight: var(--q-fw-medium);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
}

.q-h5 {
  font-family: var(--q-font-display);
  font-size: 1rem;
  font-weight: var(--q-fw-medium);
  line-height: 1.4;
  margin: 0;
}

.q-h6 {
  font-family: var(--q-font-mono);
  font-size: var(--q-t-mono);
  font-weight: var(--q-fw-medium);
  line-height: 1.4;
  letter-spacing: var(--q-tracking-mono);
  text-transform: uppercase;
  margin: 0;
  color: var(--q-text-low);
}

.q-lead {
  font-size: var(--q-t-lead);
  font-weight: var(--q-fw-regular);
  line-height: 1.55;
  color: var(--q-text-mid);
  letter-spacing: -0.005em;
}

.q-body    { font-size: var(--q-t-body);  line-height: var(--q-lh-normal); }
.q-small   { font-size: var(--q-t-small); line-height: 1.55; color: var(--q-text-mid); }
.q-xs      { font-size: var(--q-t-xs);    line-height: 1.5;  color: var(--q-text-mid); }

.q-mono {
  font-family: var(--q-font-mono);
  font-size: var(--q-t-mono);
  font-weight: var(--q-fw-medium);
  letter-spacing: var(--q-tracking-mono);
  text-transform: uppercase;
}
.q-mono--plain { text-transform: none; }

/* Eyebrow — supertag над H1 */
.q-eyebrow {
  font-family: var(--q-font-mono);
  font-size: var(--q-t-mono);
  font-weight: var(--q-fw-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--q-text-mid);
}

/* ═══════════════════════════════════════════════════════════════════
 * LAYOUT UTILITIES
 * ═══════════════════════════════════════════════════════════════════ */

.q-container {
  max-width: var(--q-container);
  margin: 0 auto;
  padding: 0 var(--q-gutter);
}
.q-container--sm { max-width: var(--q-container-sm); }
.q-container--xs { max-width: var(--q-container-xs); }

.q-muted { color: var(--q-text-mid); }
.q-dim   { color: var(--q-text-low); }
.q-hi    { color: var(--q-text-hi);  }

.q-stack > * + *     { margin-top: var(--q-s-4); }
.q-stack-sm > * + *  { margin-top: var(--q-s-2); }
.q-stack-lg > * + *  { margin-top: var(--q-s-7); }
.q-stack-xl > * + *  { margin-top: var(--q-s-10); }

.q-row    { display: flex; gap: var(--q-s-3); align-items: center; flex-wrap: wrap; }
.q-row-sm { display: flex; gap: var(--q-s-2); align-items: center; flex-wrap: wrap; }
.q-row-lg { display: flex; gap: var(--q-s-6); align-items: center; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════════
 * FOCUS RING — accent-hue, видимый только при keyboard nav
 * ═══════════════════════════════════════════════════════════════════ */

:where(button, a, [tabindex]):focus-visible {
  outline: 2px solid var(--q-accent);
  outline-offset: 2px;
  border-radius: var(--q-r-sm);
}

/* Section separator (thin hairline) */
.q-hr {
  border: 0;
  height: 1px;
  background: var(--q-line);
  margin: 0;
}

/* Screen-reader only — visually hidden, indexed by search engines */
.q-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;
}