/* Base: fonts, document defaults, focus, and the few element rules every
 * screen shares. Nothing here names a component.
 */

/* Self-hosted: the CSP allows fonts from this origin only, and a third-party
   font host would learn about every visit. Both files are subset to Latin
   plus the Turkish letters (ğ ı İ ş Ş) and keep the full weight axis. */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../assets/fonts/atkinson-hyperlegible-next.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("../assets/fonts/atkinson-hyperlegible-mono.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@layer base {
  html {
    font-family: var(--font-ui);
    background: var(--color-page);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    font-family: var(--font-ui);
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    color: var(--color-text);
    background: var(--color-page);
    -webkit-font-smoothing: antialiased;
  }

  /* A page in a language other than the authored Turkish stays hidden until
     js/core/i18n-boot.js has translated it, so the Turkish is never painted.
     The animation is the fail-safe: if the translation never runs, the
     Turkish page shows after 3 s rather than staying blank. Reduced motion
     shortens durations, not delays, so it fires there too. */
  html[data-i18n-pending] body {
    visibility: hidden;
    animation: i18n-reveal 0s 3s forwards;
  }

  @keyframes i18n-reveal {
    to {
      visibility: visible;
    }
  }

  /* One visible ring for every focusable thing, in both themes. Components on
     the dark stage swap the colour, not the shape. */
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  /* No element resets here: a later layer wins over the legacy layer whatever
     the specificity, so a reset of p or h1 margins in this layer would undo
     every margin the legacy layer still sets. Components reset their own parts. */

  /* hidden must win over any component's display. Kept here, not only in the
     legacy layer, so it survives that layer's removal. */
  [hidden] { display: none !important; }

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

  /* Numbers that change in place must not shift the layout around them. */
  :where(.num) {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
  }
}