/* Warraq brand v2 — generated from the Design System's tokens.json (do not edit by hand; run system/export_css.py).
   Numerals are 1234. Logo files: ../logo-files/*.svg. Fonts: put the Thmanyah woff2 files next to this file under fonts/. */
@font-face { font-family: "Thmanyah"; font-weight: 300; font-display: swap; src: url("fonts/thmanyahsans-Light.woff2") format("woff2"); }
@font-face { font-family: "Thmanyah"; font-weight: 400; font-display: swap; src: url("fonts/thmanyahsans-Regular.woff2") format("woff2"); }
@font-face { font-family: "Thmanyah"; font-weight: 500; font-display: swap; src: url("fonts/thmanyahsans-Medium.woff2") format("woff2"); }
@font-face { font-family: "Thmanyah"; font-weight: 700; font-display: swap; src: url("fonts/thmanyahsans-Bold.woff2") format("woff2"); }
@font-face { font-family: "Thmanyah"; font-weight: 900; font-display: swap; src: url("fonts/thmanyahsans-Black.woff2") format("woff2"); }
@font-face { font-family: "Thmanyah Text"; font-weight: 300; font-display: swap; src: url("fonts/thmanyahseriftext-Light.woff2") format("woff2"); }
@font-face { font-family: "Thmanyah Text"; font-weight: 400; font-display: swap; src: url("fonts/thmanyahseriftext-Regular.woff2") format("woff2"); }
@font-face { font-family: "Thmanyah Text"; font-weight: 500; font-display: swap; src: url("fonts/thmanyahseriftext-Medium.woff2") format("woff2"); }
@font-face { font-family: "Thmanyah Text"; font-weight: 700; font-display: swap; src: url("fonts/thmanyahseriftext-Bold.woff2") format("woff2"); }
@font-face { font-family: "Thmanyah Text"; font-weight: 900; font-display: swap; src: url("fonts/thmanyahseriftext-Black.woff2") format("woff2"); }
@font-face { font-family: "Thmanyah Display"; font-weight: 400; font-display: swap; src: url("fonts/thmanyahserifdisplay-Regular.woff2") format("woff2"); }
@font-face { font-family: "Thmanyah Display"; font-weight: 500; font-display: swap; src: url("fonts/thmanyahserifdisplay-Medium.woff2") format("woff2"); }
@font-face { font-family: "Thmanyah Display"; font-weight: 700; font-display: swap; src: url("fonts/thmanyahserifdisplay-Bold.woff2") format("woff2"); }
@font-face { font-family: "Thmanyah Display"; font-weight: 900; font-display: swap; src: url("fonts/thmanyahserifdisplay-Black.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-display: swap; src: url("fonts/ibm-plex-sans-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --paper: #F7F7F4;
  --surface-soft: #F3F3EF;
  --surface-muted: #ECECE7;
  --card: #FFFFFF;
  --line: #E2E7E8;
  --line-strong: #7A8889;
  --ink: #0C2224;
  --ink-soft: #1E3538;
  --ink-mute: #586668;
  --ink-subtle: #717D7E;
  --on-ink: #FFFFFF;
  --petrol: #02494D;
  --deep: #003237;
  --on-deep: #FFFFFF;
  --turq: #35C1BD;
  --turq-ink: #017272;
  --primary: #02494D;
  --primary-hover: #003237;
  --on-primary: #FFFFFF;
  --success: #1D7D3E;
  --success-soft: #E6F2EA;
  --on-success: #FFFFFF;
  --warning: #8D5E00;
  --warning-ink: #8D5E00;
  --warning-soft: #F6EDDA;
  --on-warning: #FFFFFF;
  --danger: #B63132;
  --danger-soft: #F8E6E6;
  --on-danger: #FFFFFF;
  --overlay: #0C2224A6;
  --glass: rgba(255,255,255,0.62);
  --glass-edge: rgba(0,50,55,0.10);
  --cat-text: #12A49D;
  --cat-text-ink: #007973;
  --cat-text-soft: #E4F9F6;
  --cat-person: #093DA1;
  --cat-person-ink: #093DA1;
  --cat-person-soft: #EFF4FC;
  --cat-waqf: #AB773B;
  --cat-waqf-ink: #956225;
  --cat-waqf-soft: #FEF1E4;
  --cat-place: #A2014E;
  --cat-place-ink: #A2014E;
  --cat-place-soft: #FEEFF2;
  --cat-query: #A362D9;
  --cat-query-ink: #8D4DC2;
  --cat-query-soft: #F6F1FD;
  --shadow-sm: 0 1px 2px #00323714;
  --shadow-md: 0 1px 2px #00323714, 0 10px 28px -10px #00323747;
  --shadow-glass: inset 0 1px 0 #fffffff2, inset 0 0 0 0.5px #0032371a, 0 1px 2px #00323714, 0 14px 36px -6px #00323733;
  --focus-ring: 0 0 0 3px #F7F7F4, 0 0 0 5px #017272;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-mark: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --control-lg: 44px;
  --control-md: 38px;
  --control-sm: 30px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --tile-ratio: 0.24;
  --chip-height: 36px;
  --chip-padding-x: 12px;
  --chip-gap: 8px;
  --row-padding-y: 12px;
  --row-stack-gap: 4px;
  --hit-min: 44px;
  --page-max: 1240px;
  --page-pad: clamp(20px, 4vw, 40px);
  --read-max: 68ch;
  --space-section: clamp(72px, 14vw, 200px);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 280ms;
  --dur-reveal: 600ms;
  --dur-draw: 900ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --stagger: 40ms;
  --font-sans: "Thmanyah", "IBM Plex Sans", "Geeza Pro", "Segoe UI", system-ui, sans-serif;
  --font-text: "Thmanyah Text", "Thmanyah", "IBM Plex Sans", "Geeza Pro", serif;
  --font-display: "Thmanyah Display", "Thmanyah Text", "IBM Plex Sans", "Geeza Pro", serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #0A1C1E;
  --surface-soft: #0E2427;
  --surface-muted: #17302F;
  --card: #12282B;
  --line: #22393C;
  --line-strong: #5E7274;
  --ink: #F7F7F4;
  --ink-soft: #DCE3E2;
  --ink-mute: #9da4a5;
  --ink-subtle: #788283;
  --on-ink: #0C2224;
  --petrol: #02494D;
  --deep: #003237;
  --on-deep: #FFFFFF;
  --turq: #35C1BD;
  --turq-ink: #5FD0CC;
  --primary: #35C1BD;
  --primary-hover: #5FD0CC;
  --on-primary: #003237;
  --success: #5BC47F;
  --success-soft: #10281A;
  --on-success: #0C2224;
  --warning: #E3A93B;
  --warning-ink: #E3A93B;
  --warning-soft: #2A2008;
  --on-warning: #0C2224;
  --danger: #F07A7A;
  --danger-soft: #3A1718;
  --on-danger: #0C2224;
  --overlay: #000000B3;
  --glass: rgba(18,40,43,0.62);
  --glass-edge: rgba(255,255,255,0.08);
  --cat-text: #32B7AF;
  --cat-text-ink: #32B7AF;
  --cat-text-soft: #32B7AF26;
  --cat-person: #708BBB;
  --cat-person-ink: #708BBB;
  --cat-person-soft: #708BBB26;
  --cat-waqf: #FBC080;
  --cat-waqf-ink: #FBC080;
  --cat-waqf-soft: #FBC08026;
  --cat-place: #BC7286;
  --cat-place-ink: #BC7286;
  --cat-place-soft: #BC728626;
  --cat-query: #DDC1FA;
  --cat-query-ink: #DDC1FA;
  --cat-query-soft: #DDC1FA26;
  --shadow-sm: 0 1px 2px #00000080;
  --shadow-md: 0 1px 2px #00000080, 0 12px 30px -10px #000000b3;
  --shadow-glass: inset 0 1px 0 #ffffff24, inset 0 0 0 1px #ffffff14, 0 10px 36px #00000059;
  --focus-ring: 0 0 0 3px #0A1C1E, 0 0 0 5px #5FD0CC;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0A1C1E;
    --surface-soft: #0E2427;
    --surface-muted: #17302F;
    --card: #12282B;
    --line: #22393C;
    --line-strong: #5E7274;
    --ink: #F7F7F4;
    --ink-soft: #DCE3E2;
    --ink-mute: #9da4a5;
    --ink-subtle: #788283;
    --on-ink: #0C2224;
    --petrol: #02494D;
    --deep: #003237;
    --on-deep: #FFFFFF;
    --turq: #35C1BD;
    --turq-ink: #5FD0CC;
    --primary: #35C1BD;
    --primary-hover: #5FD0CC;
    --on-primary: #003237;
    --success: #5BC47F;
    --success-soft: #10281A;
    --on-success: #0C2224;
    --warning: #E3A93B;
    --warning-ink: #E3A93B;
    --warning-soft: #2A2008;
    --on-warning: #0C2224;
    --danger: #F07A7A;
    --danger-soft: #3A1718;
    --on-danger: #0C2224;
    --overlay: #000000B3;
    --glass: rgba(18,40,43,0.62);
    --glass-edge: rgba(255,255,255,0.08);
    --cat-text: #32B7AF;
    --cat-text-ink: #32B7AF;
    --cat-text-soft: #32B7AF26;
    --cat-person: #708BBB;
    --cat-person-ink: #708BBB;
    --cat-person-soft: #708BBB26;
    --cat-waqf: #FBC080;
    --cat-waqf-ink: #FBC080;
    --cat-waqf-soft: #FBC08026;
    --cat-place: #BC7286;
    --cat-place-ink: #BC7286;
    --cat-place-soft: #BC728626;
    --cat-query: #DDC1FA;
    --cat-query-ink: #DDC1FA;
    --cat-query-soft: #DDC1FA26;
    --shadow-sm: 0 1px 2px #00000080;
    --shadow-md: 0 1px 2px #00000080, 0 12px 30px -10px #000000b3;
    --shadow-glass: inset 0 1px 0 #ffffff24, inset 0 0 0 1px #ffffff14, 0 10px 36px #00000059;
    --focus-ring: 0 0 0 3px #0A1C1E, 0 0 0 5px #5FD0CC;
    color-scheme: dark;
  }
}

/* the type scale as classes: Sans = Warraq's voice, Serif Text = the source's own words only, Serif Display = the logo only */
.t-display-xl { font-family: var(--font-sans); font-size: 56px; line-height: 1.15; font-weight: 700; }
.t-display-lg { font-family: var(--font-sans); font-size: 44px; line-height: 1.2; font-weight: 700; }
.t-heading { font-family: var(--font-sans); font-size: 30px; line-height: 1.3; font-weight: 700; }
.t-title { font-family: var(--font-sans); font-size: 22px; line-height: 1.35; font-weight: 700; }
.t-eyebrow { font-family: var(--font-sans); font-size: 14px; line-height: 1.4; font-weight: 500; }
.t-lede { font-family: var(--font-sans); font-size: 18px; line-height: 1.75; font-weight: 400; }
.t-body { font-family: var(--font-sans); font-size: 16px; line-height: 1.75; font-weight: 400; }
.t-body-sm { font-family: var(--font-sans); font-size: 14.5px; line-height: 1.7; font-weight: 400; }
.t-caption { font-family: var(--font-sans); font-size: 12.5px; line-height: 1.5; font-weight: 400; }
.t-ui-large { font-family: var(--font-sans); font-size: 17px; line-height: 1.3; font-weight: 400; }
.t-ui-regular { font-family: var(--font-sans); font-size: 15px; line-height: 1.6; font-weight: 400; }
.t-ui-medium { font-family: var(--font-sans); font-size: 15px; line-height: 1.6; font-weight: 500; }
.t-ui-button { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 500; }
.t-ui-label { font-family: var(--font-sans); font-size: 14px; line-height: 1.7; font-weight: 500; }
.t-ui-small { font-family: var(--font-sans); font-size: 13px; line-height: 1.6; font-weight: 400; }
.t-ui-tiny { font-family: var(--font-sans); font-size: 12px; line-height: 1.4; font-weight: 500; }
.t-ui-chip { font-family: var(--font-sans); font-size: 13px; line-height: 1; font-weight: 500; }
.t-ui-tag { font-family: var(--font-sans); font-size: 12.5px; line-height: 1; font-weight: 500; }
.t-quote-lg { font-family: var(--font-text); font-size: 23px; line-height: 1.8; font-weight: 400; }
.t-quote { font-family: var(--font-text); font-size: 19px; line-height: 1.8; font-weight: 400; }
.t-quote-sm { font-family: var(--font-text); font-size: 15px; line-height: 1.7; font-weight: 400; }
.t-wordmark-name { font-family: var(--font-display); font-size: 34px; line-height: 1.1; font-weight: 700; }
.t-m-hero { font-family: var(--font-sans); font-size: clamp(52px, 7vw, 104px); line-height: 1.15; font-weight: 700; }
.t-m-headline { font-family: var(--font-sans); font-size: clamp(36px, 4.6vw, 68px); line-height: 1.2; font-weight: 700; }
.t-m-number { font-family: var(--font-sans); font-size: clamp(64px, 9vw, 152px); line-height: 1; font-weight: 700; }
.t-m-lede { font-family: var(--font-sans); font-size: clamp(19px, 1.7vw, 26px); line-height: 1.65; font-weight: 400; }
.t-m-body { font-family: var(--font-sans); font-size: 18px; line-height: 1.8; font-weight: 400; }
.t-m-eyebrow { font-family: var(--font-sans); font-size: 15px; line-height: 1.4; font-weight: 500; }
.t-m-quote { font-family: var(--font-text); font-size: 26px; line-height: 1.85; font-weight: 400; }
.t-reading-1 { font-family: var(--font-sans); font-size: 16px; line-height: 1.9; font-weight: 400; }
.t-reading-2 { font-family: var(--font-sans); font-size: 18px; line-height: 1.9; font-weight: 400; }
.t-reading-3 { font-family: var(--font-sans); font-size: 20px; line-height: 1.9; font-weight: 400; }
.t-reading-4 { font-family: var(--font-sans); font-size: 23px; line-height: 1.85; font-weight: 400; }
.t-reading-5 { font-family: var(--font-sans); font-size: 26px; line-height: 1.8; font-weight: 400; }
.t-reading-6 { font-family: var(--font-sans); font-size: 30px; line-height: 1.75; font-weight: 400; }
.t-reading-7 { font-family: var(--font-sans); font-size: 34px; line-height: 1.75; font-weight: 400; }
.t-reading-8 { font-family: var(--font-sans); font-size: 40px; line-height: 1.75; font-weight: 400; }

/* the two materials: evidence is opaque paper; only floating tools are glass */
.glass { background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%); box-shadow: var(--shadow-glass); }