/* Modern, privacy-friendly typography using system fonts already on the device. */
:root {
  --dm-font-ar: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, sans-serif;
  --dm-font-de: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --dm-type-ink: #0f172a;
  --dm-type-muted: #475569;
}

html { text-rendering: optimizeLegibility; }
body,
button,
input,
select,
textarea {
  font-family: var(--dm-font-ar) !important;
}
[lang="de"],
.de,
.latin {
  font-family: var(--dm-font-de) !important;
  font-weight: 600;
}

/* Stronger type hierarchy on light reading surfaces; preserve white hero text. */
.content-card .hero h1,
.content-card .section h2,
.content-card .section-head h2,
.lesson-card h3,
.level-card h3,
.level h3,
.info-card h3 {
  color: var(--dm-type-ink) !important;
  font-weight: 750 !important;
  letter-spacing: -0.018em;
}
.content-card .hero h1 {
  font-size: clamp(29px, 3.8vw, 42px) !important;
  line-height: 1.38 !important;
}
.content-card .section h2,
.content-card .section-head h2 {
  font-size: clamp(20px, 2.25vw, 24px) !important;
  line-height: 1.5 !important;
}
.content-card .hero .lead {
  color: var(--dm-type-muted) !important;
  font-size: 17px !important;
  line-height: 1.9 !important;
}
.content-card .section-intro,
.content-card .explain p,
.content-card .reading p:not(.de),
.content-card .task,
.content-card .writing > p {
  color: var(--dm-type-muted) !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
}
.lesson-card p,
.level-card p,
.level p,
.info-card p {
  color: var(--dm-type-muted) !important;
  font-size: 15px !important;
  line-height: 1.85 !important;
}
.top .nav {
  color: var(--dm-type-muted);
  font-family: var(--dm-font-ar);
  font-weight: 600;
}
.top .nav .dm-install-link { font-weight: inherit; }
@media (max-width: 560px) {
  .content-card .hero .lead { font-size: 16px !important; }
  .content-card .section-intro,
  .content-card .explain p,
  .content-card .reading p:not(.de),
  .content-card .task,
  .content-card .writing > p { font-size: 15px !important; }
}