/* Al-Kawthar — Heritage Modern theme tokens */

:root {
  /* The palette is designed for one appearance only. Without this, Chrome's
     automatic dark mode re-colours the page algorithmically: the cream header
     turns near-black and the dark green QR card inverts to pale mint. "only
     light" opts out of that, and also keeps form controls and scrollbars light. */
  color-scheme: only light;

  /* Colors */
  --color-bg:       #faf8f3;
  --color-surface:  #ffffff;
  --color-ink:      #1a2e24;
  --color-primary:  #0f3d2e;
  --color-accent:   #c49a3a;
  /* The brand gold measures only 2.5:1 on the light backgrounds, so small
     gold text uses this darker one. #c49a3a stays for buttons, borders and
     for text on the dark green, where it measures 4.65:1. */
  --color-accent-ink: #896b28;
  --color-muted:    #67726c;
  --color-border:   #e8e3d6;

  /* Typography */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    var(--font-body-latin);
  --font-arabic:  "IBM Plex Sans Arabic", "Noto Sans Arabic", sans-serif;

  /* Held separately from --font-body so rtl.css can point --font-body at the Arabic face
     for the Arabic page while Latin-only runs (the street address, the email
     address) still resolve to a Latin face. */
  --font-body-latin: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-base: 17px;
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-md:   1rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.5rem;
  --fs-3xl:  3.25rem;

  --lh-tight: 1.2;
  --lh-body:  1.6;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  /* Layout */
  --content-max: 1100px;
  --radius: 4px;
  --radius-lg: 12px;
}

/* Font faces (self-hosted) */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-v16-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-v16-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-v13-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-v13-latin-600.woff2") format("woff2");
}
/* IBM Plex Sans Arabic (SIL OFL 1.1), self-hosted like every other face here
   so no request ever leaves for a font CDN. Replaced Amiri, whose small,
   fine-stroked Naskh drew noticeably smaller than Inter at the same em size
   and was hard to read at body sizes. */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-700.woff2") format("woff2");
}