@font-face { font-family: 'Noto Naskh Arabic'; font-style: normal; font-weight: 600; font-display: optional; src: url('/fonts/naskh-arabic.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: optional; src: url('/fonts/plex-arabic-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: optional; src: url('/fonts/plex-arabic-600.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 700; font-display: optional; src: url('/fonts/source-serif-latin.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: optional; src: url('/fonts/inter-latin.woff2') format('woff2'); }

/* Source of truth for the reports design system. See DESIGN.md. */
:root {
  color-scheme: light dark;
  --color-ink: #14110f;
  --color-paper: #f6f2ea;
  --color-oxblood: #8c1d2c;
  --color-sand: #c9b28a;
  --color-warm-gray: #6b645c;
  --surface: var(--color-paper);
  --surface-raised: #fffdf8;
  --text: var(--color-ink);
  --text-secondary: var(--color-warm-gray);
  --accent: var(--color-oxblood);
  --on-accent: #ffffff;
  --divider: var(--color-sand);
  --interactive-border: var(--color-warm-gray);
  --link: var(--color-oxblood);
  --focus: var(--color-oxblood);
  --font-heading: 'Source Serif 4', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-heading-ar: 'Noto Naskh Arabic', 'Times New Roman', serif;
  --font-body-ar: 'IBM Plex Sans Arabic', 'Inter', sans-serif;
  --font-size-small: 0.875rem;
  --font-size-body: 1rem;
  --font-size-lead: 1.125rem;
  --font-size-h3: clamp(1.375rem, 2vw, 1.75rem);
  --font-size-h2: clamp(1.75rem, 3vw, 2.5rem);
  --font-size-h1: clamp(2.5rem, 6vw, 5rem);
  --line-body: 1.75;
  --line-heading: 1.13;
  --line-heading-ar: 1.5;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-strong: 600;
  --space-0: 0;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.5rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-10: 5rem;
  --space-12: 6rem;
  --container: 75rem;
  --measure: 68ch;
  --gutter: clamp(1rem, 4vw, 3rem);
  --radius-small: 0.25rem;
  --radius-medium: 0.5rem;
  --border-thin: 1px;
  --focus-width: 3px;
  --focus-offset: 3px;
  --duration: 200ms;
  --easing: cubic-bezier(0.2, 0, 0, 1);
  --sticky-offset: 5rem;
  --layer-header: 20;
  --layer-panel: 40;
  --layer-dialog: 60;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --surface: #0f0d0c;
    --surface-raised: #1b1816;
    --text: #ede6d8;
    --text-secondary: #bdb3a7;
    --divider: #695b47;
    --interactive-border: #bdb3a7;
    --link: #ede6d8;
    --focus: #ede6d8;
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --surface: #0f0d0c;
  --surface-raised: #1b1816;
  --text: #ede6d8;
  --text-secondary: #bdb3a7;
  --divider: #695b47;
  --interactive-border: #bdb3a7;
  --link: #ede6d8;
  --focus: #ede6d8;
}
:root[data-theme='light'] { color-scheme: light; }
:root:lang(ar) {
  --font-heading: var(--font-heading-ar);
  --font-body: var(--font-body-ar);
  --line-heading: var(--line-heading-ar);
}
@media (prefers-reduced-motion: reduce) {
  :root { --duration: 0ms; }
}

body{background:var(--surface);color:var(--text);font-family:var(--font-body);line-height:1.8}h1,h2,h3,h4{font-family:var(--font-heading);color:var(--text)}a{color:var(--link)}header,.topbar,footer{background:var(--surface);color:var(--text);border-color:var(--divider)}.brand-mark,.btn,.stamp{background:var(--accent);color:#fff}.brand,.head nav a{color:var(--text)}.pageheading,.filterbar,.introstrip,.sidebar,.explorecard,.card,.empty,.notice{background:var(--surface-raised);color:var(--text);border-color:var(--divider)}.btn.light{background:var(--surface-raised);color:var(--text);border:1px solid var(--divider)}.legacy{border:0!important}.hero,.section,.pagebody{padding-block:3rem}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--focus);outline-offset:4px}input,select,button{font-family:var(--font-body)}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}