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

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

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

  body {
    margin: 0;
    background: var(--surface-primary);
    color: var(--label-primary);
    font-family: var(--font-body);
    font-size: var(--fs-body-1);
    line-height: 1.375;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

  h1, h2, h3 { font-family: var(--font-display); font-weight: 400; }
  h4, h5, h6 { font-family: var(--font-body); font-weight: 500; }

  h1 { font-size: var(--fs-h1); font-weight: 300; line-height: 1;    letter-spacing: -.0547em; }
  h2 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.03em; }
  h3 { font-size: var(--fs-h3); line-height: 1.18; letter-spacing: -.02em; }
  h4 { font-size: var(--fs-h4); line-height: 1.32; letter-spacing: -.01em; }
  h5 { font-size: var(--fs-h5); line-height: 1.32; letter-spacing: -.01em; }

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

  a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }

  button, input, select, textarea { font: inherit; color: inherit; }

  ul, ol { margin: 0; padding: 0; }

  /* Видимий фокус лишаємо завжди — це вимога доступності, не декор. */
  :focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    border-radius: var(--r-8);
  }

  /* ---- Типографічні утиліти з макета ---- */
  /* h4 і h5 потрібні як утиліти окремо від тегів: у розмітці заголовок
     часто мусить бути h2 чи h3 заради структури документа, а виглядати
     має дрібніше. Без них клас у шаблоні мовчки не робив нічого. */
  .t-h4         { font-family: var(--font-body); font-size: var(--fs-h4); font-weight: 500; line-height: 1.32; letter-spacing: -.01em; }
  .t-h5         { font-family: var(--font-body); font-size: var(--fs-h5); font-weight: 500; line-height: 1.32; letter-spacing: -.01em; }
  .t-subtitle-1 { font-size: var(--fs-subtitle-1); line-height: 1.34; }
  .t-subtitle-2 { font-size: var(--fs-subtitle-2); font-weight: 500; line-height: 1.32; }
  .t-body-1     { font-size: var(--fs-body-1); line-height: 1.375; }
  .t-body-2     { font-size: var(--fs-body-2); line-height: 1.43; }
  .t-caption    { font-size: var(--fs-caption); line-height: 1.37; }
  .t-overline {
    font-size: var(--fs-overline);
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .04em;
    /* Був --label-quaternary. На секціях із фотофоном (Hero, About, FAQ,
       Contacts) сірий надзаголовок не читався — заміна на акцент, а не
       освітлення сірого, бо це рішення із дзвінка 04.09. */
    color: var(--accent-primary);
  }

  /* ---- Розкладка ---- */
  .container {
    width: min(var(--container), 100% - var(--gutter) * 2);
    margin-inline: auto;
  }

  .section { padding-block: var(--section-pad); }

  .visually-hidden:not(:focus):not(:active) {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .skip-link {
    position: absolute;
    inset-inline-start: var(--sp-16);
    inset-block-start: var(--sp-16);
    z-index: 1000;
    padding: var(--sp-12) var(--sp-20);
    background: var(--surface-secondary);
    border-radius: var(--r-8);
    transform: translateY(-200%);
    transition: transform var(--dur) var(--ease);
  }
  .skip-link:focus { transform: none; }
}