@layer base {
  /* ===
     Reset + element defaults. Everything reads the contextual aliases from
     tokens.css, so a section flips theme by class alone.
     === */

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

  * { margin: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Anchor targets must clear the sticky header. */
    scroll-padding-top: calc(var(--header-h) + var(--s5));
  }

  body {
    min-height: 100svh;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--f-body);
    font-size: var(--t-body);
    font-weight: 400;
    line-height: 1.62;
    letter-spacing: -0.003em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* A 40-row dimension table must never push the page sideways. */
    overflow-x: hidden;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--f-display);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }

  h1 { font-size: var(--t-h1); font-weight: 800; }
  h2 { font-size: var(--t-h2); }
  h3 { font-size: var(--t-h3); line-height: 1.18; letter-spacing: -0.02em; }
  h4 { font-size: 1.05rem; line-height: 1.3; letter-spacing: -0.01em; }

  p { text-wrap: pretty; }
  p + p { margin-top: var(--s4); }

  a {
    color: inherit;
    text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
    text-underline-offset: 0.22em;
    text-decoration-thickness: 1px;
    transition: color var(--d-fast) var(--e-out),
                text-decoration-color var(--d-fast) var(--e-out);
  }

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

  /**
   * Prose links: the rule draws in from the left on hover and leaves to the right on
   * mouse-out, rather than blinking on and off. Painted as a background image so it
   * can be animated — `text-decoration` cannot be.
   *
   * Scoped to running copy: buttons, nav, cards and table cells all have their own
   * treatments and must not inherit this one.
   */
  .prose a,
  .faq__a a,
  .lede a,
  .sec-head__aside a {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-size: 0% 1px;
    padding-bottom: 0.12em;
    transition: background-size var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
  }

  .prose a:hover,
  .faq__a a:hover,
  .lede a:hover,
  .sec-head__aside a:hover,
  .prose a:focus-visible,
  .faq__a a:focus-visible,
  .lede a:focus-visible,
  .sec-head__aside a:focus-visible { background-position: 0% 100%; background-size: 100% 1px; }

  strong, b { font-weight: 600; }

  small { font-size: var(--t-sm); }

  ul, ol { padding-left: 1.15em; }
  li + li { margin-top: var(--s2); }
  li::marker { color: var(--accent-text); }

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

  code, kbd, samp { font-family: var(--f-mono); font-size: 0.92em; }

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

  /* Thin, dark-themed scrollbar on desktop; the native one on touch, where the
     platform's own overlay bar is the right answer. */
  @media (pointer: fine) {
    html { scrollbar-width: thin; scrollbar-color: #2a3138 transparent; }

    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #2a3138; border: 3px solid transparent; background-clip: content-box; }
    ::-webkit-scrollbar-thumb:hover { background: #3b444d; background-clip: content-box; }
  }

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

  img { height: auto; }

  /**
   * P4 — one photographic grade for brand imagery: slightly desaturated, contrast
   * lifted, shadows tinted towards graphite so the mixed white balance of the scraped
   * library reads as one set. Catalog *product* photos are deliberately excluded and
   * kept true-colour — a buyer choosing between brass and bronze needs the real hue.
   */
  .graded { position: relative; overflow: hidden; }

  .graded > img,
  img.graded { filter: saturate(0.86) contrast(1.09) brightness(0.98); }

  .graded::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: #8e97a3;
    mix-blend-mode: multiply;
    opacity: 0.14;
  }

  input, button, textarea, select {
    font: inherit;
    color: inherit;
    /* Machined metal, not a mobile app — override the UA's rounded controls. */
    border-radius: var(--radius);
  }

  button { cursor: pointer; }

  textarea { resize: vertical; }

  /* Chrome/Edge autofill repaints inputs a pale yellow; hold the surface. */
  input:-webkit-autofill,
  textarea:-webkit-autofill { -webkit-text-fill-color: var(--text); box-shadow: inset 0 0 0 100px var(--raise); }

  /* 2px red outline with 2px offset. Never `outline: none` without a replacement. */
  :focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

  /* Mouse users never see the ring; keyboard users always do. */
  :focus:not(:focus-visible) { outline: none; }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .skip-link {
    position: absolute;
    top: var(--s2);
    left: var(--s2);
    z-index: 200;
    padding: var(--s3) var(--s5);
    background: var(--red-ui);
    color: #fff;
    font-family: var(--f-mono);
    font-size: var(--t-sm);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform var(--d-fast) var(--e-out);
  }

  /* `:focus-visible`, not `:focus`.
     The link is only useful to somebody navigating by keyboard, and `:focus` revealed
     it to everybody else: any programmatic focus jump — the back-to-top button was the
     one the client hit — popped a red "Pređi na sadržaj" panel into the top-left corner
     of a page being driven entirely by mouse. Under `:focus-visible` the browser tells
     us whether the focus came from a keyboard, so pressing Tab as the first action on a
     page still reveals it and a pointer never does.

     The reveal is a transform on a permanently `position: absolute` element, so it is
     off-canvas by construction. No script is involved in hiding it, and none can leave
     it stuck open. */
  .skip-link:focus-visible { transform: translateY(0); color: #fff; }

  /* <main> takes focus programmatically (back-to-top) but is never in the tab order,
     so a focus ring on it would only ever appear after a mouse click. */
  main:focus { outline: none; }

  [hidden] { display: none !important; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 1ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* Print — see the full stylesheet in the `pages` layer (P12). */
  @media print {
    body { background: #fff; color: #000; }
  }
}