/* ============================================================
 * BASE — Typography, body, links, global reset
 * ============================================================ */

html {
  direction: rtl;
}

body.msl-toolkit-design {
  font-family: var(--msl-font-body) !important;
  font-size: var(--msl-fs-body);
  line-height: var(--msl-lh-normal);
  color: var(--msl-body);
  background: var(--msl-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.msl-toolkit-design h1,
.msl-toolkit-design h2,
.msl-toolkit-design h3,
.msl-toolkit-design h4,
.msl-toolkit-design h5,
.msl-toolkit-design h6 {
  font-family: var(--msl-font-heading) !important;
  color: var(--msl-ink);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: var(--msl-lh-snug);
}

.msl-toolkit-design h1 {
  font-size: var(--msl-fs-h1);
  font-weight: 900;
  line-height: var(--msl-lh-tight);
  color: var(--msl-navy);
  margin-bottom: var(--msl-s-4);
}

.msl-toolkit-design h2 {
  font-size: var(--msl-fs-h2);
  color: var(--msl-navy);
}

.msl-toolkit-design h3 { font-size: var(--msl-fs-h3); }
.msl-toolkit-design h4 { font-size: var(--msl-fs-h4); }

.msl-toolkit-design p {
  font-size: var(--msl-fs-body);
  line-height: var(--msl-lh-loose);
  color: var(--msl-body);
  margin-bottom: var(--msl-s-4);
}

.msl-toolkit-design a {
  color: var(--msl-navy);
  text-decoration: none;
  transition: color var(--msl-t-fast);
}

.msl-toolkit-design a:hover {
  color: var(--msl-amber);
}

.msl-toolkit-design ::selection {
  background: var(--msl-amber-soft);
  color: var(--msl-ink);
}

/* Focus-visible — נגישות */
.msl-toolkit-design *:focus-visible {
  outline: 3px solid var(--msl-amber);
  outline-offset: 3px;
  border-radius: var(--msl-r-sm);
}

/* Skip-link לנגישות */
.msl-skip-link {
  position: absolute;
  right: -9999px;
  top: 0;
}
.msl-skip-link:focus {
  right: 10px;
  top: 10px;
  background: var(--msl-navy);
  color: var(--msl-white);
  padding: 10px 20px;
  border-radius: var(--msl-r-sm);
  z-index: 9999;
}

/* Scrollbar — עדין בטעם המותג */
.msl-toolkit-design ::-webkit-scrollbar { width: 10px; height: 10px; }
.msl-toolkit-design ::-webkit-scrollbar-track { background: var(--msl-cream-2); }
.msl-toolkit-design ::-webkit-scrollbar-thumb { background: var(--msl-navy); border-radius: 10px; border: 2px solid var(--msl-cream-2); }
.msl-toolkit-design ::-webkit-scrollbar-thumb:hover { background: var(--msl-navy-2); }