/* ==========================================================================
   Arqam design system - tokens
   Palette taken from the organisation logo: green #0B7A3B, gold #E8D44D / #C9A227,
   navy #1F2A7A, brown #6B2E1F. Themes are selected with <html data-theme="...">:
   green (default) | royal | sand | night | sky.
   Every text/background pair below is checked for WCAG AA (>= 4.5:1), see CHANGELOG.
   ========================================================================== */

/* ---- fonts (vendored, SIL OFL 1.1 - see lib/fonts/LICENSE-*) -------------- */
@font-face { font-family: "Cairo"; font-weight: 400; font-display: swap; src: url(../lib/fonts/cairo-arabic-400-normal.woff2) format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: "Cairo"; font-weight: 600; font-display: swap; src: url(../lib/fonts/cairo-arabic-600-normal.woff2) format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: "Cairo"; font-weight: 700; font-display: swap; src: url(../lib/fonts/cairo-arabic-700-normal.woff2) format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: "Cairo"; font-weight: 800; font-display: swap; src: url(../lib/fonts/cairo-arabic-800-normal.woff2) format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: "Cairo"; font-weight: 400; font-display: swap; src: url(../lib/fonts/cairo-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Cairo"; font-weight: 600; font-display: swap; src: url(../lib/fonts/cairo-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Cairo"; font-weight: 700; font-display: swap; src: url(../lib/fonts/cairo-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Cairo"; font-weight: 800; font-display: swap; src: url(../lib/fonts/cairo-latin-800-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Noto Naskh Arabic"; font-weight: 400; font-display: swap; src: url(../lib/fonts/noto-naskh-arabic-arabic-400-normal.woff2) format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: "Noto Naskh Arabic"; font-weight: 600; font-display: swap; src: url(../lib/fonts/noto-naskh-arabic-arabic-600-normal.woff2) format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: "Noto Naskh Arabic"; font-weight: 700; font-display: swap; src: url(../lib/fonts/noto-naskh-arabic-arabic-700-normal.woff2) format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: "Noto Naskh Arabic"; font-weight: 400; font-display: swap; src: url(../lib/fonts/noto-naskh-arabic-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Noto Naskh Arabic"; font-weight: 600; font-display: swap; src: url(../lib/fonts/noto-naskh-arabic-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Noto Naskh Arabic"; font-weight: 700; font-display: swap; src: url(../lib/fonts/noto-naskh-arabic-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ---- structural tokens (theme independent) --------------------------------- */
:root {
  /* spacing scale 4 / 8 / 12 / 16 / 24 / 32 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;  --sp-5: 24px;  --sp-6: 32px;
  /* radius */
  --radius-sm: 6px;  --radius: 10px;  --radius-lg: 16px;  --radius-pill: 999px;
  /* type */
  --font-ui: "Cairo", "Segoe UI", Tahoma, "Noto Sans Arabic", Arial, sans-serif;
  --font-body: "Noto Naskh Arabic", "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
  --fs-xs: .8125rem;  --fs-sm: .9375rem;  --fs-base: 1rem;  --fs-lg: 1.125rem;  --fs-xl: 1.375rem;  --fs-2xl: 1.75rem;
  --lh-body: 1.75;  --lh-tight: 1.4;
  /* layout */
  --topbar-h: 60px;  --sidebar-w: 248px;  --content-max: 1480px;
  /* motion */
  --ease: .16s ease;
  /* brand constants (never change with the theme) */
  --brand-green: #0B7A3B;  --brand-gold: #E8D44D;  --brand-gold-deep: #C9A227;  --brand-navy: #1F2A7A;  --brand-brown: #6B2E1F;
  /* second logo (blue badge): sky blue #0F70B7, light blue #97ADDE, yellow #F0EB15, navy #2B2A8C, dark brown #4A3020 */
  --brand-sky: #0F70B7;  --brand-sky-light: #97ADDE;  --brand-sky-yellow: #F0EB15;  --brand-sky-navy: #2B2A8C;  --brand-sky-brown: #4A3020;
}

/* ---- THEME 1: «الأخضر الأزهري» (default) ----------------------------------- */
:root, :root[data-theme="green"] {
  color-scheme: light;
  --c-bg: #F2F6F1;           --c-surface: #FFFFFF;      --c-surface-2: #EBF2EB;    --c-zebra: #F4F8F3;
  --c-hover: #E4EFE4;        --c-border: #D3DED4;       --c-border-strong: #B4C5B7;
  --c-text: #14231A;         --c-muted: #4F6157;        --c-heading: #075A2B;
  --c-primary: #0B7A3B;      --c-primary-hover: #086230; --c-on-primary: #FFFFFF;  --c-primary-soft: #DDEFE2;
  --c-outline: #0B7A3B;      --c-link: #1F2A7A;         --c-link-hover: #0F1760;
  --c-accent: #C9A227;       --c-accent-bright: #E8D44D; --c-accent-text: #7A5F00;  --c-on-accent: #241C00;
  --c-topbar-bg: linear-gradient(180deg, #0D8542 0%, #086B33 100%);  --c-topbar-text: #FFFFFF;  --c-topbar-border: #E8D44D;
  --c-side-bg: #064B26;      --c-side-text: #E3F1E7;    --c-side-muted: #A9CDB5;   --c-side-hover: rgba(255,255,255,.08);
  --c-side-active-bg: rgba(232,212,77,.16);  --c-side-active-text: #F6E98F;  --c-side-border: rgba(255,255,255,.12);
  --c-th-bg: #DCEBDF;        --c-th-text: #0A4A25;
  --c-ok-bg: #DDF1E3;   --c-ok-text: #0A4A25;   --c-ok-solid: #0B7A3B;   --c-on-ok-solid: #FFFFFF;
  --c-err-bg: #FBE4E1;  --c-err-text: #7A1812;  --c-err-solid: #B3261E;  --c-on-err-solid: #FFFFFF;
  --c-warn-bg: #FBF0C4; --c-warn-text: #5A4300; --c-warn-solid: #E8D44D; --c-on-warn-solid: #241C00;
  --c-info-bg: #E3E8F8; --c-info-text: #1B2468; --c-info-solid: #1F2A7A; --c-on-info-solid: #FFFFFF;
  --c-chip-bg: #E3EAE4; --c-chip-text: #2F4237;
  --c-pattern: #0B7A3B;  --c-pattern-opacity: .07;
  --c-hero-bg: linear-gradient(135deg, #075A2B 0%, #0B7A3B 60%, #0F8F47 100%);  --c-hero-text: #FFFFFF;  --c-hero-accent: #F2E37A;
  --c-arch: #0B7A3B;
  --c-focus: #1F2A7A;
  --shadow-sm: 0 1px 2px rgba(7,60,30,.08), 0 1px 3px rgba(7,60,30,.06);
  --shadow: 0 4px 12px rgba(7,60,30,.10);
  --shadow-lg: 0 12px 32px rgba(7,60,30,.16);
}

/* ---- THEME 2: «الأزرق الملكي» --------------------------------------------- */
:root[data-theme="royal"] {
  color-scheme: light;
  --c-bg: #F1F3FA;           --c-surface: #FFFFFF;      --c-surface-2: #E9ECF8;    --c-zebra: #F4F6FC;
  --c-hover: #E3E8F8;        --c-border: #D3D9EC;       --c-border-strong: #B3BCDD;
  --c-text: #131A3A;         --c-muted: #4B5479;        --c-heading: #1F2A7A;
  --c-primary: #1F2A7A;      --c-primary-hover: #161F5E; --c-on-primary: #FFFFFF;  --c-primary-soft: #E1E6F8;
  --c-outline: #1F2A7A;      --c-link: #1F3FB5;         --c-link-hover: #142C8A;
  --c-accent: #C9A227;       --c-accent-bright: #E8D44D; --c-accent-text: #7A5F00;  --c-on-accent: #241C00;
  --c-topbar-bg: linear-gradient(180deg, #27358F 0%, #1A2468 100%);  --c-topbar-text: #FFFFFF;  --c-topbar-border: #E8D44D;
  --c-side-bg: #141C58;      --c-side-text: #E4E8FA;    --c-side-muted: #A9B4E6;   --c-side-hover: rgba(255,255,255,.08);
  --c-side-active-bg: rgba(232,212,77,.16);  --c-side-active-text: #F6E98F;  --c-side-border: rgba(255,255,255,.12);
  --c-th-bg: #E0E5F7;        --c-th-text: #1B2468;
  --c-ok-bg: #DDF1E3;   --c-ok-text: #0A4A25;   --c-ok-solid: #0B7A3B;   --c-on-ok-solid: #FFFFFF;
  --c-err-bg: #FBE4E1;  --c-err-text: #7A1812;  --c-err-solid: #B3261E;  --c-on-err-solid: #FFFFFF;
  --c-warn-bg: #FBF0C4; --c-warn-text: #5A4300; --c-warn-solid: #E8D44D; --c-on-warn-solid: #241C00;
  --c-info-bg: #E3E8F8; --c-info-text: #1B2468; --c-info-solid: #1F2A7A; --c-on-info-solid: #FFFFFF;
  --c-chip-bg: #E4E7F4; --c-chip-text: #2E3563;
  --c-pattern: #1F2A7A;  --c-pattern-opacity: .07;
  --c-hero-bg: linear-gradient(135deg, #141C58 0%, #1F2A7A 60%, #2B3A9C 100%);  --c-hero-text: #FFFFFF;  --c-hero-accent: #F2E37A;
  --c-arch: #1F2A7A;
  --c-focus: #1F2A7A;
  --shadow-sm: 0 1px 2px rgba(20,28,88,.08), 0 1px 3px rgba(20,28,88,.06);
  --shadow: 0 4px 12px rgba(20,28,88,.10);
  --shadow-lg: 0 12px 32px rgba(20,28,88,.18);
}

/* ---- THEME 3: «الرملي الفاتح» ---------------------------------------------- */
:root[data-theme="sand"] {
  color-scheme: light;
  --c-bg: #F5EDDA;           --c-surface: #FFFBF2;      --c-surface-2: #F0E4C8;    --c-zebra: #FAF3E2;
  --c-hover: #F2E6CA;        --c-border: #E0D2B2;       --c-border-strong: #C7B48A;
  --c-text: #2B1C12;         --c-muted: #65533F;        --c-heading: #6B2E1F;
  --c-primary: #0B7A3B;      --c-primary-hover: #086230; --c-on-primary: #FFFFFF;  --c-primary-soft: #E2EEDA;
  --c-outline: #0B7A3B;      --c-link: #7A3420;         --c-link-hover: #5A2314;
  --c-accent: #C9A227;       --c-accent-bright: #E8D44D; --c-accent-text: #735800;  --c-on-accent: #241C00;
  --c-topbar-bg: linear-gradient(180deg, #FFFBF2 0%, #F6EBCF 100%);  --c-topbar-text: #4A1F13;  --c-topbar-border: #C9A227;
  --c-side-bg: #5E2819;      --c-side-text: #F7EAD2;    --c-side-muted: #D8BE9E;   --c-side-hover: rgba(255,255,255,.08);
  --c-side-active-bg: rgba(232,212,77,.18);  --c-side-active-text: #F8E98E;  --c-side-border: rgba(255,255,255,.14);
  --c-th-bg: #EFE0BD;        --c-th-text: #4F2112;
  --c-ok-bg: #E0F0D8;   --c-ok-text: #0A4A25;   --c-ok-solid: #0B7A3B;   --c-on-ok-solid: #FFFFFF;
  --c-err-bg: #FBE1DB;  --c-err-text: #7A1812;  --c-err-solid: #B3261E;  --c-on-err-solid: #FFFFFF;
  --c-warn-bg: #FAEDBA; --c-warn-text: #5A4300; --c-warn-solid: #E8D44D; --c-on-warn-solid: #241C00;
  --c-info-bg: #E6E6F4; --c-info-text: #1B2468; --c-info-solid: #1F2A7A; --c-on-info-solid: #FFFFFF;
  --c-chip-bg: #EBDFC3; --c-chip-text: #4B3A27;
  --c-pattern: #6B2E1F;  --c-pattern-opacity: .08;
  --c-hero-bg: linear-gradient(135deg, #5E2819 0%, #7B3A26 60%, #0B7A3B 160%);  --c-hero-text: #FFF8E8;  --c-hero-accent: #F2E37A;
  --c-arch: #0B7A3B;
  --c-focus: #6B2E1F;
  --shadow-sm: 0 1px 2px rgba(94,40,25,.10), 0 1px 3px rgba(94,40,25,.06);
  --shadow: 0 4px 12px rgba(94,40,25,.12);
  --shadow-lg: 0 12px 32px rgba(94,40,25,.20);
}

/* ---- THEME 4: «الوضع الليلي» ----------------------------------------------- */
:root[data-theme="night"] {
  color-scheme: dark;
  --c-bg: #09110D;           --c-surface: #111D17;      --c-surface-2: #182A21;    --c-zebra: #14231C;
  --c-hover: #1C3026;        --c-border: #28392F;       --c-border-strong: #3D5547;
  --c-text: #E8EFE9;         --c-muted: #A4B7AB;        --c-heading: #E8D44D;
  --c-primary: #E8D44D;      --c-primary-hover: #F3E479; --c-on-primary: #14180A;  --c-primary-soft: #26361F;
  --c-outline: #E8D44D;      --c-link: #9DB6FF;         --c-link-hover: #C2D2FF;
  --c-accent: #C9A227;       --c-accent-bright: #E8D44D; --c-accent-text: #E8D44D;  --c-on-accent: #14180A;
  --c-topbar-bg: linear-gradient(180deg, #0F1D16 0%, #0B1510 100%);  --c-topbar-text: #F1EAC0;  --c-topbar-border: #C9A227;
  --c-side-bg: #070E0A;      --c-side-text: #D9E5DC;    --c-side-muted: #8DA396;   --c-side-hover: rgba(255,255,255,.07);
  --c-side-active-bg: rgba(232,212,77,.14);  --c-side-active-text: #F2E27A;  --c-side-border: rgba(255,255,255,.10);
  --c-th-bg: #1D3327;        --c-th-text: #F2E27A;
  --c-ok-bg: #11301F;   --c-ok-text: #A6E8BE;   --c-ok-solid: #3FD686;   --c-on-ok-solid: #04170B;
  --c-err-bg: #3A1714;  --c-err-text: #FFB9B1;  --c-err-solid: #FF8A80;  --c-on-err-solid: #2A0805;
  --c-warn-bg: #3A3010; --c-warn-text: #F5E58A; --c-warn-solid: #E8D44D; --c-on-warn-solid: #241C00;
  --c-info-bg: #16233F; --c-info-text: #B5C9FF; --c-info-solid: #9DB6FF;  --c-on-info-solid: #0B1530;
  --c-chip-bg: #223329; --c-chip-text: #CFDCD3;
  --c-pattern: #E8D44D;  --c-pattern-opacity: .06;
  --c-hero-bg: linear-gradient(135deg, #0E2A1C 0%, #123826 60%, #1A4A32 100%);  --c-hero-text: #F4F1D6;  --c-hero-accent: #E8D44D;
  --c-arch: #134030;
  --c-focus: #E8D44D;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow: 0 4px 14px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.6);
}

/* ---- THEME 5: «الأزرق السماوي» (from the blue logo) -------------------------------------
   blue #0F70B7 primary, light blue #97ADDE for borders/tints, navy #2B2A8C headings, yellow #F0EB15 accent
   (ornaments and markers; text in yellow-on-light uses the deep #7A6600), dark brown #4A3020 only as the text on yellow. */
:root[data-theme="sky"] {
  color-scheme: light;
  --c-bg: #EEF4FB;           --c-surface: #FFFFFF;      --c-surface-2: #E4EDF9;    --c-zebra: #F3F7FC;
  --c-hover: #E0EAF8;        --c-border: #CBD8EE;       --c-border-strong: #97ADDE;
  --c-text: #10213A;         --c-muted: #475775;        --c-heading: #2B2A8C;
  --c-primary: #0F70B7;      --c-primary-hover: #0B5C99; --c-on-primary: #FFFFFF;  --c-primary-soft: #E6F0FB;
  --c-outline: #0F70B7;      --c-link: #0B5CA8;         --c-link-hover: #073F78;
  --c-accent: #D9CE00;       --c-accent-bright: #F0EB15; --c-accent-text: #7A6600;  --c-on-accent: #4A3020;
  --c-topbar-bg: linear-gradient(180deg, #1277C0 0%, #0A5A96 100%);  --c-topbar-text: #FFFFFF;  --c-topbar-border: #F0EB15;
  --c-side-bg: linear-gradient(180deg, #0E5C9E 0%, #2B2A8C 100%);  --c-side-text: #EAF2FC;    --c-side-muted: #C3D6F3;   --c-side-hover: rgba(255,255,255,.10);
  --c-side-active-bg: rgba(240,235,21,.16);  --c-side-active-text: #F6F27A;  --c-side-border: rgba(255,255,255,.14);
  --c-th-bg: #D4E2F7;        --c-th-text: #1D2272;
  --c-ok-bg: #DDF1E3;   --c-ok-text: #0A4A25;   --c-ok-solid: #0B7A3B;   --c-on-ok-solid: #FFFFFF;
  --c-err-bg: #FBE4E1;  --c-err-text: #7A1812;  --c-err-solid: #B3261E;  --c-on-err-solid: #FFFFFF;
  --c-warn-bg: #FBF6B8; --c-warn-text: #5A4A00; --c-warn-solid: #F0EB15; --c-on-warn-solid: #4A3020;
  --c-info-bg: #E3EBFA; --c-info-text: #1E2A80; --c-info-solid: #2B2A8C; --c-on-info-solid: #FFFFFF;
  --c-chip-bg: #DDE7F6; --c-chip-text: #2B3566;
  --c-pattern: #0F70B7;  --c-pattern-opacity: .07;
  --c-hero-bg: linear-gradient(135deg, #0B4F8C 0%, #0F70B7 60%, #2B2A8C 150%);  --c-hero-text: #FFFFFF;  --c-hero-accent: #FAF7A6;
  --c-arch: #0F70B7;
  --c-focus: #2B2A8C;
  --shadow-sm: 0 1px 2px rgba(20,50,110,.10), 0 1px 3px rgba(20,50,110,.06);
  --shadow: 0 4px 12px rgba(20,50,110,.12);
  --shadow-lg: 0 12px 32px rgba(20,50,110,.20);
}

/* ---- map the tokens onto Bootstrap 5.3 variables --------------------------- */
:root, :root[data-theme] {
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: var(--fs-base);
  --bs-body-line-height: var(--lh-body);
  --bs-body-color: var(--c-text);
  --bs-body-color-rgb: 20, 35, 26;
  --bs-body-bg: var(--c-bg);
  --bs-secondary-color: var(--c-muted);
  --bs-tertiary-bg: var(--c-surface-2);
  --bs-border-color: var(--c-border);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-lg: var(--radius);
  --bs-link-color: var(--c-link);
  --bs-link-color-rgb: 31, 42, 122;
  --bs-link-hover-color: var(--c-link-hover);
  --bs-heading-color: var(--c-heading);
  --bs-emphasis-color: var(--c-text);
  --bs-form-text-color: var(--c-muted);
  --bs-focus-ring-color: color-mix(in srgb, var(--c-focus) 28%, transparent);
  --bs-code-color: var(--c-accent-text);
  --bs-card-bg: var(--c-surface);
}