/* ==========================================================================
   Muslim Library — Design Tokens
   Maps 1:1 to theme.json (palette / spacing / radius / font families).
   ========================================================================== */

/* ---------- Fonts (self-hosted, subset, swap) ---------- */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-sans-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: "IBM Plex Sans Arabic";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/ibm-plex-sans-arabic-arabic-500-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: "IBM Plex Sans Arabic";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/ibm-plex-sans-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: "IBM Plex Sans Arabic";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/ibm-plex-sans-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 Kufi Arabic";
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/noto-kufi-arabic-arabic-wght-normal.woff2") format("woff2-variations");
  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: "Inter";
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  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;
}

:root {
  /* ---------- Brand palette (raw) ---------- */
  /* Brand accent — overridable by the colour switcher (see "Accent palettes" below) */
  /* Default = BROWN (from the logo). Green, burgundy, teal, navy are alternates. */
  --brand-900: #4E2F12;      /* Dark */
  --brand-700: #74461D;      /* Primary */
  --brand-500: #9A6A36;
  --brand-100: #F5EADD;      /* Light */
  --brand-heading: #2B1B0B;  /* heading ink, tinted with the brand */
  --brand-deep-muted: #D8C4AA;
  /* Dark-mode counterparts of the brand */
  --dk-bg: #16130F; --dk-bg-alt: #1C1813; --dk-surface: #221D17; --dk-surface-2: #29231C; --dk-sunk: #110E0B;
  --dk-border: #3A3127; --dk-border-strong: #4C4134; --dk-deep: #140F0A;
  --dk-primary: #E0B278; --dk-primary-hover: #EBC897; --dk-primary-soft: #3A2A18; --dk-on-primary: #2A1A08;
  --dk-skeleton: #2A241D; --dk-skeleton-shine: #342D24; --dk-hero-to: #211A12;
  /* Back-compat aliases */
  --ml-green-900: var(--brand-900);   /* legacy alias names (now point at the active brand colour) */
  --ml-green-700: var(--brand-700);
  --ml-green-500: var(--brand-500);
  --ml-green-100: var(--brand-100);
  --ml-ivory:     #FDF6E4;   /* Ivory */
  --ml-warm-white:#FFFCF5;   /* Warm White */
  --ml-gold:      #C8A96B;   /* Gold */
  --ml-gold-700:  #8A6D2F;   /* Gold, text-safe on light (4.9:1 on warm white) */
  --ml-ink:       #17231D;   /* Text */
  --ml-muted:     #68756D;   /* Muted (brand). 4.7:1 on warm white, <4.5 on ivory → UI uses --color-text-muted */
  --ml-line:      #E4E0D5;   /* Border */

  /* ---------- Semantic tokens (light) ---------- */
  --color-bg:            var(--ml-warm-white);
  --color-bg-alt:        var(--ml-ivory);
  --color-surface:       #FFFFFF;
  --color-surface-2:     #F7F3E8;
  --color-surface-sunk:  #F3EEDF;
  --color-text:          var(--ml-ink);
  --color-text-muted:    #5F6B64;          /* brand Muted #68756D darkened 1 step: ≥4.8:1 on every light surface (AA) */
  --color-heading:       var(--brand-heading);
  --color-border:        var(--ml-line);
  --color-border-strong: #CFC8B6;
  --color-primary:       var(--ml-green-700);
  --color-primary-hover: var(--ml-green-900);
  --color-primary-soft:  var(--ml-green-100);
  --color-on-primary:    #FFFFFF;
  --color-accent:        var(--ml-gold);
  --color-accent-text:   var(--ml-gold-700);
  --color-accent-soft:   #F5ECD6;
  --color-link:          var(--ml-green-700);
  --color-focus:         var(--brand-500);
  --color-danger:        #A63A2B;
  --color-danger-soft:   #FBEAE6;
  --color-success:       var(--ml-green-700);
  --color-info-soft:     #E8EEF6;
  --color-overlay:       rgb(10 25 18 / 0.5);
  --color-pattern:       color-mix(in srgb, var(--brand-700) 8%, transparent);
  --color-pattern-gold:  rgb(200 169 107 / 0.15);
  --color-skeleton:      #EFE9DA;
  --color-skeleton-shine:#F8F4EA;
  --color-hero-from:     #FFFCF5;
  --color-hero-to:       #F6EDD6;
  --color-deep:          var(--ml-green-900);   /* deep sections: CTA, footer */
  --color-on-deep:       #F4EFE1;
  --color-on-deep-muted: var(--brand-deep-muted);
  --color-on-deep-strong:#FFF8E8;   /* headings on deep blocks (CTA, footer, feature) */
  --color-on-accent:     #22190A;   /* ink on the gold fill */
  --color-accent-hover:  #B8975A;   /* gold button hover on light surfaces */
  --color-accent-strong: #DCC390;   /* gold button hover on deep blocks */

  /* ---------- Typography ---------- */
  --font-body:    "IBM Plex Sans Arabic", "Inter", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --font-display: "Noto Kufi Arabic", "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;
  --font-latin:   "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Fluid type scale (min @320 → max @1440) */
  --text-xs:   0.75rem;                                   /* 12 */
  --text-sm:   0.875rem;                                  /* 14 */
  --text-base: 1rem;                                      /* 16 */
  --text-md:   clamp(1.0625rem, 1.02rem + 0.2vw, 1.125rem);/* 17–18 */
  --text-lg:   clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); /* 18–22 */
  --text-xl:   clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);   /* 22–28 */
  --text-2xl:  clamp(1.625rem, 1.35rem + 1.3vw, 2.25rem);  /* 26–36 */
  --text-3xl:  clamp(2rem, 1.5rem + 2.4vw, 3.25rem);       /* 32–52 */
  --text-4xl:  clamp(2.375rem, 1.6rem + 3.6vw, 4.25rem);   /* 38–68 */

  --leading-tight: 1.25;
  --leading-snug:  1.45;
  --leading-body:  1.8;    /* Arabic needs generous leading */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 0.25rem;  /*  4 */
  --space-2: 0.5rem;   /*  8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-20: 5rem;    /* 80 */
  --space-24: 6rem;    /* 96 */
  --section-gap: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  --gutter: clamp(1rem, 0.6rem + 1.8vw, 2rem);

  /* ---------- Radius ---------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-xs: 0 1px 2px rgb(23 35 29 / 0.06);
  --shadow-sm: 0 1px 2px rgb(23 35 29 / 0.05), 0 2px 8px rgb(23 35 29 / 0.05);
  --shadow-md: 0 2px 4px rgb(23 35 29 / 0.04), 0 10px 28px rgb(23 35 29 / 0.08);
  --shadow-lg: 0 4px 10px rgb(23 35 29 / 0.05), 0 24px 56px rgb(23 35 29 / 0.12);
  --shadow-cover: 0 1px 1px rgb(0 0 0 / 0.08), 0 6px 14px rgb(23 35 29 / 0.14), 0 18px 36px -12px rgb(23 35 29 / 0.25);

  /* ---------- Layout ---------- */
  --container: 1280px;
  --container-wide: 1440px;
  --container-narrow: 760px;
  --header-h: 72px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 360ms;

  color-scheme: light;
}

/* ---------- Dark theme: warm, low-glare reading palette (not an inversion) ---------- */
/* Dark is applied when (a) the OS prefers dark and the user has not flipped the toggle,
   or (b) the OS prefers light and the user has flipped the toggle.
   In WordPress the choice is persisted as html[data-theme] (tiny inline script).
   DO NOT delete the two :has(#theme-toggle:checked) blocks as "prototype-only": the
   toggle is a native checkbox, so those blocks are what makes dark mode work in
   WordPress with JavaScript disabled. The repetition is deliberate; gzip absorbs it. */
:root[data-theme="dark"] {
  --color-bg:            var(--dk-bg);
  --color-bg-alt:        var(--dk-bg-alt);
  --color-surface:       var(--dk-surface);
  --color-surface-2:     var(--dk-surface-2);
  --color-surface-sunk:  var(--dk-sunk);
  --color-text:          #E6E1D3;
  --color-text-muted:    #A5B0A8;
  --color-heading:       #F3EEE0;
  --color-border:        var(--dk-border);
  --color-border-strong: var(--dk-border-strong);
  --color-primary:       var(--dk-primary);
  --color-primary-hover: var(--dk-primary-hover);
  --color-primary-soft:  var(--dk-primary-soft);
  --color-on-primary:    var(--dk-on-primary);
  --color-accent:        #D8BE88;
  --color-accent-text:   #DCC390;
  --color-accent-soft:   #2C2718;
  --color-link:          var(--dk-primary-hover);
  --color-focus:         var(--dk-primary-hover);
  --color-danger:        #F09A8C;
  --color-danger-soft:   #3A1F1A;
  --color-info-soft:     #1A2430;
  --color-overlay:       rgb(0 0 0 / 0.62);
  --color-pattern:       color-mix(in srgb, var(--dk-primary) 7%, transparent);
  --color-pattern-gold:  rgb(216 190 136 / 0.12);
  --color-skeleton:      var(--dk-skeleton);
  --color-skeleton-shine:var(--dk-skeleton-shine);
  --color-hero-from:     var(--dk-bg);
  --color-hero-to:       var(--dk-hero-to);
  --color-deep:          var(--dk-deep);
  --color-on-deep:       #EDE7D6;
  --color-on-deep-muted: #9FB1A6;
  --color-on-deep-strong:#F5F0E2;
  --color-on-accent:     #22190A;
  --color-accent-hover:  #C2A66F;
  --color-accent-strong: #DCC390;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-md: 0 8px 24px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 20px 48px rgb(0 0 0 / 0.45);
  --shadow-cover: 0 1px 1px rgb(0 0 0 / 0.3), 0 10px 24px rgb(0 0 0 / 0.45);
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]):has(#theme-toggle:checked) {
  --color-bg:            var(--dk-bg);
  --color-bg-alt:        var(--dk-bg-alt);
  --color-surface:       var(--dk-surface);
  --color-surface-2:     var(--dk-surface-2);
  --color-surface-sunk:  var(--dk-sunk);
  --color-text:          #E6E1D3;
  --color-text-muted:    #A5B0A8;
  --color-heading:       #F3EEE0;
  --color-border:        var(--dk-border);
  --color-border-strong: var(--dk-border-strong);
  --color-primary:       var(--dk-primary);
  --color-primary-hover: var(--dk-primary-hover);
  --color-primary-soft:  var(--dk-primary-soft);
  --color-on-primary:    var(--dk-on-primary);
  --color-accent:        #D8BE88;
  --color-accent-text:   #DCC390;
  --color-accent-soft:   #2C2718;
  --color-link:          var(--dk-primary-hover);
  --color-focus:         var(--dk-primary-hover);
  --color-danger:        #F09A8C;
  --color-danger-soft:   #3A1F1A;
  --color-info-soft:     #1A2430;
  --color-overlay:       rgb(0 0 0 / 0.62);
  --color-pattern:       color-mix(in srgb, var(--dk-primary) 7%, transparent);
  --color-pattern-gold:  rgb(216 190 136 / 0.12);
  --color-skeleton:      var(--dk-skeleton);
  --color-skeleton-shine:var(--dk-skeleton-shine);
  --color-hero-from:     var(--dk-bg);
  --color-hero-to:       var(--dk-hero-to);
  --color-deep:          var(--dk-deep);
  --color-on-deep:       #EDE7D6;
  --color-on-deep-muted: #9FB1A6;
  --color-on-deep-strong:#F5F0E2;
  --color-on-accent:     #22190A;
  --color-accent-hover:  #C2A66F;
  --color-accent-strong: #DCC390;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-md: 0 8px 24px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 20px 48px rgb(0 0 0 / 0.45);
  --shadow-cover: 0 1px 1px rgb(0 0 0 / 0.3), 0 10px 24px rgb(0 0 0 / 0.45);
  color-scheme: dark;
}
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]):not(:has(#theme-toggle:checked)) {
    --color-bg:            var(--dk-bg);
    --color-bg-alt:        var(--dk-bg-alt);
    --color-surface:       var(--dk-surface);
    --color-surface-2:     var(--dk-surface-2);
    --color-surface-sunk:  var(--dk-sunk);
    --color-text:          #E6E1D3;
    --color-text-muted:    #A5B0A8;
    --color-heading:       #F3EEE0;
    --color-border:        var(--dk-border);
    --color-border-strong: var(--dk-border-strong);
    --color-primary:       var(--dk-primary);
    --color-primary-hover: var(--dk-primary-hover);
    --color-primary-soft:  var(--dk-primary-soft);
    --color-on-primary:    var(--dk-on-primary);
    --color-accent:        #D8BE88;
    --color-accent-text:   #DCC390;
    --color-accent-soft:   #2C2718;
    --color-link:          var(--dk-primary-hover);
    --color-focus:         var(--dk-primary-hover);
    --color-danger:        #F09A8C;
    --color-danger-soft:   #3A1F1A;
    --color-info-soft:     #1A2430;
    --color-overlay:       rgb(0 0 0 / 0.62);
    --color-pattern:       color-mix(in srgb, var(--dk-primary) 7%, transparent);
    --color-pattern-gold:  rgb(216 190 136 / 0.12);
    --color-skeleton:      var(--dk-skeleton);
    --color-skeleton-shine:var(--dk-skeleton-shine);
    --color-hero-from:     var(--dk-bg);
    --color-hero-to:       var(--dk-hero-to);
    --color-deep:          var(--dk-deep);
    --color-on-deep:       #EDE7D6;
    --color-on-deep-muted: #9FB1A6;
    --color-on-deep-strong:#F5F0E2;
    --color-on-accent:     #22190A;
    --color-accent-hover:  #C2A66F;
    --color-accent-strong: #DCC390;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow-md: 0 8px 24px rgb(0 0 0 / 0.35);
    --shadow-lg: 0 20px 48px rgb(0 0 0 / 0.45);
    --shadow-cover: 0 1px 1px rgb(0 0 0 / 0.3), 0 10px 24px rgb(0 0 0 / 0.45);
    color-scheme: dark;
  }
}

/* Latin-first pages (LTR languages) */
:root:lang(en), :root:lang(fr), :root:lang(de), :root:lang(es), :root:lang(tr), :root:lang(ms) {
  --font-body:    "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Inter", "Noto Kufi Arabic", system-ui, sans-serif;
  --leading-body: 1.65;
}

/* ==========================================================================
   Accent palettes — user colour switcher
   Prototype: radio inputs in the header (:has). WordPress: html[data-accent]
   persisted in localStorage / user meta. Every palette keeps AA contrast:
   white on --brand-700 ≥ 7:1, --dk-primary on --dk-bg ≥ 7:1.
   ========================================================================== */
:root[data-accent="green"], :root:has(#accent-green:checked), :root:has(#accent-d-green:checked) {        /* original green */
  --brand-900: #0A4128; --brand-700: #0F5C3A; --brand-500: #2E7D57; --brand-100: #E4F2EA;
  --brand-heading: #0E2A1D; --brand-deep-muted: #B9C9BE;
  --dk-bg: #0F1714; --dk-bg-alt: #131D19; --dk-surface: #17221D; --dk-surface-2: #1C2923; --dk-sunk: #0C1310;
  --dk-border: #28362F; --dk-border-strong: #3A4A42; --dk-deep: #0B1511;
  --dk-primary: #6CC79A; --dk-primary-hover: #8AD7B0; --dk-primary-soft: #1B3328; --dk-on-primary: #08231A;
  --dk-skeleton: #1F2B25; --dk-skeleton-shine: #26342D; --dk-hero-to: #14221B;
}
:root[data-accent="burgundy"], :root:has(#accent-burgundy:checked), :root:has(#accent-d-burgundy:checked) {   /* from the logo */
  --brand-900: #4F120F; --brand-700: #7A1E1A; --brand-500: #9C3A2E; --brand-100: #F6E6E2;
  --brand-heading: #2E0F0C; --brand-deep-muted: #D9B9B3;
  --dk-bg: #171112; --dk-bg-alt: #1D1517; --dk-surface: #22191B; --dk-surface-2: #2A1F21; --dk-sunk: #120D0E;
  --dk-border: #3A2A2D; --dk-border-strong: #4D3A3D; --dk-deep: #150C0D;
  --dk-primary: #EE9D90; --dk-primary-hover: #F5B8AD; --dk-primary-soft: #3A1E1C; --dk-on-primary: #2A0B08;
  --dk-skeleton: #2B2022; --dk-skeleton-shine: #35292B; --dk-hero-to: #221618;
}
:root[data-accent="brown"], :root:has(#accent-brown:checked), :root:has(#accent-d-brown:checked) {         /* logo brown */
  --brand-900: #4E2F12; --brand-700: #74461D; --brand-500: #9A6A36; --brand-100: #F5EADD;
  --brand-heading: #2B1B0B; --brand-deep-muted: #D8C4AA;
  --dk-bg: #16130F; --dk-bg-alt: #1C1813; --dk-surface: #221D17; --dk-surface-2: #29231C; --dk-sunk: #110E0B;
  --dk-border: #3A3127; --dk-border-strong: #4C4134; --dk-deep: #140F0A;
  --dk-primary: #E0B278; --dk-primary-hover: #EBC897; --dk-primary-soft: #3A2A18; --dk-on-primary: #2A1A08;
  --dk-skeleton: #2A241D; --dk-skeleton-shine: #342D24; --dk-hero-to: #211A12;
}
:root[data-accent="teal"], :root:has(#accent-teal:checked), :root:has(#accent-d-teal:checked) {
  --brand-900: #093F4B; --brand-700: #0E5E6F; --brand-500: #2A7F90; --brand-100: #E0F0F3;
  --brand-heading: #0B2A31; --brand-deep-muted: #B5CDD2;
  --dk-bg: #0E1618; --dk-bg-alt: #121C1F; --dk-surface: #162225; --dk-surface-2: #1B292D; --dk-sunk: #0A1112;
  --dk-border: #27363A; --dk-border-strong: #384A4F; --dk-deep: #0A1416;
  --dk-primary: #6CC6D6; --dk-primary-hover: #93D8E4; --dk-primary-soft: #183239; --dk-on-primary: #06232A;
  --dk-skeleton: #1E2B2E; --dk-skeleton-shine: #263538; --dk-hero-to: #122126;
}
:root[data-accent="navy"], :root:has(#accent-navy:checked), :root:has(#accent-d-navy:checked) {
  --brand-900: #172B55; --brand-700: #23407A; --brand-500: #3E5E9E; --brand-100: #E5EBF6;
  --brand-heading: #111E3B; --brand-deep-muted: #BCC7DE;
  --dk-bg: #0F131B; --dk-bg-alt: #131822; --dk-surface: #171D29; --dk-surface-2: #1C2331; --dk-sunk: #0B0E14;
  --dk-border: #283143; --dk-border-strong: #394458; --dk-deep: #0B0F17;
  --dk-primary: #93B0EA; --dk-primary-hover: #B2C7F0; --dk-primary-soft: #1D2A45; --dk-on-primary: #0B1630;
  --dk-skeleton: #1F2635; --dk-skeleton-shine: #283042; --dk-hero-to: #141B29;
}