/*
  The public pages — /privacy, /terms, /support, /delete-account.
  They cannot load the app's stylesheet, so the tokens they use are declared
  here with the app's own values (src/styles/mobdla-theme.css): no colour on
  these pages is invented, and none is written anywhere but in this block.
*/
:root {
  --pink-500: #C8102E;       /* brand red, the fill */
  --pink-300: #FF5A67;       /* the red that reads as text on dark */
  --brand-text: var(--pink-500);  /* links: 5.64:1 on --surface-0 light */
  --surface-0: #FAFAFA;
  --text-1: #111114;
  --text-2: #4A4A52;
  --border: #E6E6E9;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface-0: #0E0E10;
    --text-1: #EDEDEF;
    --text-2: #B4B4BC;
    --border: #2A2A30;
    /* #C8102E on #0E0E10 is 3.28:1 — under 4.5:1 for text — which is why
       the app switches the WORD to --pink-300 on dark: 6.35:1 here. */
    --brand-text: var(--pink-300);
  }
}
/* The app's own typefaces (src/index.css), from the same files under /fonts —
   Tajawal for Arabic, Poppins for Latin — with the same fallbacks as
   --font-ar / --font-en in mobdla-theme.css. */
@font-face { font-family: "Tajawal"; src: url("/fonts/tajawal-arabic-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Tajawal"; src: url("/fonts/tajawal-arabic-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/poppins-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/poppins-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
body {
  margin: 0; background: var(--surface-0); color: var(--text-1);
  font-family: "Tajawal", "Poppins", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  line-height: 1.75;
}
.en { font-family: "Poppins", "Segoe UI", Tahoma, Arial, sans-serif; }
main { max-width: 44rem; margin: 0 auto; padding: 2rem 1rem 4rem; }
header.site { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .95rem; margin-bottom: 1.5rem; }
header.site a { color: var(--text-2); }
h1 { font-size: 1.65rem; line-height: 1.35; margin: 0 0 .25rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 .5rem; }
h3 { font-size: 1rem; margin: 1.25rem 0 .25rem; }
p, li { color: var(--text-1); }
.muted { color: var(--text-2); font-size: .95rem; }
ol, ul { padding-inline-start: 1.25rem; }
li { margin: .35rem 0; }
a { color: var(--brand-text); }
ol { list-style-type: arabic-indic; }
.en ol { list-style-type: decimal; }
.en { direction: ltr; text-align: left; border-top: 1px solid var(--border); margin-top: 3rem; padding-top: 1.5rem; }
.note { border-inline-start: 3px solid var(--border); padding-inline-start: .75rem; color: var(--text-2); }