/* Site-wide minimal base. Components own their own classes. */

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

html {
  background: var(--bg-canvas);
  color: var(--fg-text);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Smooth anchor scrolling only when the reader hasn't asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", "Noto Sans Arabic", sans-serif;
  font-feature-settings: "ss01", "cv11";
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  min-height: 100dvh;
}
[lang="ar"], [lang="fa"], [lang="ur"], [lang="sd"], [lang="ku"], [dir="rtl"] {
  line-height: var(--lh-arabic);
  letter-spacing: 0;
}

a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }

/* Visually-hidden but accessible to AT */
.dits-sr {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Focus ring used by all atoms */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Page layout primitive */
.dits-container {
  width: 100%; max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 32px);
}

/* Fade-in utility used by lists / cards */
.dits-fade-in { animation: dits-fade-in var(--dur-base) var(--ease-out) both; }
@keyframes dits-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}