@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap');
@font-face{font-family:'Watad';font-style:normal;font-weight:600;font-display:swap;src:url('/ar/help/fonts/watad.otf') format('opentype');}

				:root {
						--global-font-body: 'IBM Plex Sans Arabic', sans-serif !important;
						--global-font-display: 'Watad', 'IBM Plex Sans Arabic', sans-serif !important;

						--action-color: #000000;
						--action-foreground: #ffffff;
						--action-color-alpha-10: color-mix(in srgb, var(--action-color) 10%, transparent);
						--action-color-alpha-60: color-mix(in srgb, var(--action-color) 60%, transparent);

						--background-color: #ffffffff;
						--background-color-rgb: 255,255,255;
						--background-image: none;
						--foreground-color: #000000;
						/* Derived, not fixed: a hardcoded dark muted is invisible on
						   a dark-themed tenant's page background. Mixing toward the
						   page background adapts to either polarity. Card surfaces
						   use --card-muted-foreground-color instead. */
						--muted-foreground-color: color-mix(in srgb, var(--foreground-color) 72%, var(--background-color));
						--border-color: #e7e2da;

						--card-background-color: #ffffff;
						--card-border-color: #e7e2da;
						/* Card surfaces are always light, so their text colour is
						   derived from the CARD background — never from
						   --foreground-color, which tracks the PAGE background and
						   flips to white on dark-themed tenants. Using the page
						   value here renders white-on-white and hides the text. */
						--card-foreground-color: #1a1a1a;
						--card-muted-foreground-color: #565049;

						--collection-card-background-color: #f8f6f3;
						--collection-card-image: none;
						--collection-card-icon-color: #1a1a1a;

						--header-background-color1: #ffffffff;
						--header-background-color2: #414345FF;
						--header-background-color3: #000000ff;
						--header-background-image: none;
						--header-text-color: #1a1a1a;
						--header-height: 400px;
						--subheader-background-color: transparent;
						--subheader-text-color: #1a1a1a;

						--footer-background-color: #232526FF;
						--footer-border-color: #e7e2da;
						--footer-text-color: #ffffff;

						--toc-active-border-color: #1a1a1a;
						--toc-inactive-border-color: #e7e2da;
						--toc-inactive-text-color: #565049;
						--toc-active-font-weight: 500;

						--reaction-background-color: #f1ede6;
						--reaction-text-color: #565049;

						--table-border-color: #d9d3c9;

						--search-bar-width: 100%;

						--promo-background-color: #ffffff;
						--promo-background-image: none;
						--promo-text-color: #1a1a1a;
						--promo-button-background-color: var(--action-color);
						--promo-button-text-color: var(--action-foreground);
						--promo-margin: 0;
						--promo-width: auto;

						--hc-ar-h1-size: 35px;
						--hc-ar-h1-leading: 45px;
						--hc-ar-h2-size: 24px;
						--hc-ar-h2-leading: 39px;
						--hc-ar-card-size: 17px;
						--hc-ar-card-leading: 27px;
						--hc-ar-body-size: 17px;
						--hc-ar-body-leading: 27px;
						--hc-ar-meta-size: 15px;
						--hc-ar-meta-leading: 25px;
					}


					body {
						font-family: var(--global-font-body);
					}

					h1, h2, h3, h4, h5, h6 {
						font-family: var(--global-font-display);
					}