/* paymentnotify.app — the app's colours (dashboard/docs/screens/01-colors.md) and fonts (02), light and dark. */
@font-face { font-family: "Plex Sans"; src: url("/fonts/plex-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("/fonts/plex-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url("/fonts/plex-arabic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url("/fonts/plex-arabic-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("/fonts/rubik.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  --bg: #FFFBF4;
  --surface: #FFFFFF;
  --surface-variant: #F2F4FA;
  --outline: #E6E8F0;
  --ink: #1B2145;
  --muted: #5A6080;
  --primary: #4F6BFF;
  --link: #2A3FB8;
  --body: "Plex Sans", "Plex Arabic", system-ui, sans-serif;
  --display: "Rubik", "Plex Arabic", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111530;
    --surface: #1B2145;
    --surface-variant: #252C57;
    --outline: #343B66;
    --ink: #F2F3FA;
    --muted: #A3A9C7;
    --primary: #8093FF;
    --link: #8093FF;
  }
}
:lang(ar) { --body: "Plex Arabic", "Plex Sans", system-ui, sans-serif; --display: "Plex Arabic", "Plex Sans", system-ui, sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--body);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
:lang(ar) body, body:lang(ar) { line-height: 1.8; }
a { color: var(--link); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

.skip { position: absolute; inset-inline-start: 1rem; top: -3rem; padding: 0.5rem 0.75rem; background: var(--surface); border-radius: 8px; }
.skip:focus { top: 0.75rem; }

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 0.875rem max(1rem, calc((100% - 46rem) / 2));
  background: var(--surface);
  border-bottom: 1px solid var(--outline);
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink); text-decoration: none; font: 600 1.125rem/1 var(--display); }
.brand img { border-radius: 8px; }
.bar nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; }
.bar nav a { display: inline-block; padding: 0.55rem 0; min-height: 44px; line-height: 1.9; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.bar nav a:hover, .bar nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--primary); }

main { flex: 1; width: 100%; max-width: 46rem; margin: 0 auto; padding: 2.5rem 1rem 3.5rem; }

.hero { text-align: center; padding-top: 2rem; }
.hero img { border-radius: 22px; box-shadow: 0 6px 24px rgb(79 107 255 / 0.22); }
.hero h1 { margin: 1.25rem 0 0.25rem; font: 600 2.5rem/1.15 var(--display); }
.tagline { margin: 0 0 1rem; color: var(--primary); font: 500 1.25rem/1.4 var(--display); }
.hero > p:not(.tagline) { max-width: 32rem; margin: 0 auto; color: var(--muted); }
.links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; padding: 0; margin: 2rem 0 0; }
.links a {
  display: inline-block;
  padding: 0.7rem 1.1rem;
  min-height: 44px;
  border: 1px solid var(--outline);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.links a:hover { border-color: var(--primary); }

.doc h1 { margin: 0 0 0.35rem; font: 600 2rem/1.2 var(--display); }
.doc .meta { margin: 0 0 2rem; color: var(--muted); font-size: 0.95rem; }
.doc h2 { margin: 2.25rem 0 0.5rem; font: 600 1.3rem/1.3 var(--display); }
.doc h3, .doc h4 { margin: 1.5rem 0 0.4rem; font: 600 1.1rem/1.35 var(--display); }
.doc p, .doc li { max-width: 68ch; }
.doc ul, .doc ol { padding-inline-start: 1.4rem; }
.doc li { margin: 0.3rem 0; }
.doc blockquote { margin: 1.25rem 0; padding: 0.75rem 1rem; border-inline-start: 4px solid var(--primary); background: var(--surface-variant); border-radius: 8px; }
.doc blockquote p { margin: 0.25rem 0; }
.card { margin: 1rem 0; padding: 1.1rem 1.25rem; background: var(--surface); border: 1px solid var(--outline); border-radius: 16px; }
.card h2 { margin: 0 0 0.35rem; font-size: 1.1rem; }
.card p { margin: 0; }

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 1.25rem max(1rem, calc((100% - 46rem) / 2));
  border-top: 1px solid var(--outline);
  color: var(--muted);
  font-size: 0.9rem;
}

@media (max-width: 30rem) {
  .hero h1 { font-size: 2rem; }
  .doc h1 { font-size: 1.65rem; }
}
@media print {
  .bar nav, .skip, .foot { display: none; }
  body { background: #fff; color: #000; }
}