@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap");

html { scroll-behavior: smooth; }
body { font-family: "Tajawal", system-ui, sans-serif; }

::selection { background: #19305a; color: #fff; }
[data-theme="dark"] ::selection { background: #00c2ff; color: #070e1b; }

/* accessible focus indicator (WCAG 2.1 non-text contrast) */
:root { --focus-color: #19305a; }
[data-theme="dark"] { --focus-color: #00c2ff; }
:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
  border-radius: 4px;
}

/* skip-to-content link */
.skip-link {
  position: absolute;
  right: 16px;
  top: -60px;
  z-index: 200;
  background: #19305a;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 700;
  transition: top .2s ease;
}
.skip-link:focus {
  top: 16px;
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #19305a; border-radius: 8px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #00c2ff; }

/* timeline connector (about page) */
.tl-line { position: relative; }
.tl-line::before {
  content: ""; position: absolute; inset-inline-start: 23px; top: 0; bottom: 0; width: 2px;
  background: #d0d5dd;
}
[data-theme="dark"] .tl-line::before { background: #1f355c; }
.tl-line::after {
  content: ""; position: absolute; inset-inline-start: 23px; top: 0; width: 2px;
  height: var(--tl-progress, 0%);
  background: #19305a;
  transition: height .15s linear;
}
[data-theme="dark"] .tl-line::after { background: #00c2ff; }

/* stepper connector (how-it-works) */
.step-line { position: relative; }
.step-line::before {
  content: ""; position: absolute; top: 23px; inset-inline-start: 0; inset-inline-end: 0; height: 2px;
  background: #d0d5dd;
  z-index: 0;
}
[data-theme="dark"] .step-line::before { background: #1f355c; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}