/* The site's one colour theme, taken from the Verb Forms guide: a neutral paper base with four
   complementary accents (purple, blue, green, amber), a slate, and a rose for warnings.

   Every page keeps its own CSS. build-search.ps1 links this file into each page and tags <html> with
   data-site="<kinds>" (e.g. "guide", "research mukhtar", "grammar-ref"). The blocks below re-point each
   kind of page's own colour variables at this palette, then fix the few colours pages hard-code.
   Selectors start with html[data-site] so they outrank the pages' own rules, in light and dark mode.
   To change the site's colours, change the --v-* values here and nowhere else. */

/* ---------- palette ---------- */
html[data-site]:root {
  --v-paper: #F6F6F2; --v-sheet: #FFFFFF; --v-sunk: #EEEEE8; --v-ink: #1D2130; --v-body: #2F3443;
  --v-muted: #5D6270; --v-faint: #858A96; --v-rule: #DEDDD5; --v-on: #FFFFFF;
  --v-f1: #5B3091; --v-f1s: #EFE9F8;   /* purple */
  --v-f2: #185FA5; --v-f2s: #E6F0FA;   /* blue: links, active tabs, main accent */
  --v-f3: #12795B; --v-f3s: #E1F3EC;   /* green */
  --v-f4: #A8660F; --v-f4s: #FBF0DE;   /* amber: eyebrows, numbers */
  --v-f0: #3D4555; --v-f0s: #EEF0F3;   /* slate */
  --v-warn: #9E3446; --v-warns: #F8E7EA; /* rose */
  --v-box: #1D2130; --v-box-ink: #E5E8EE; --v-box-gold: #E6B561;  /* dark panels: hadith, verdicts */
  --v-shadow: 0 1px 2px rgba(29,33,48,.05), 0 8px 24px -18px rgba(29,33,48,.35);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  html[data-site]:root:not([data-theme="light"]) {
    --v-paper: #121620; --v-sheet: #1A1F2A; --v-sunk: #232A36; --v-ink: #E5E8EE; --v-body: #C9CED8;
    --v-muted: #9AA2B1; --v-faint: #747C8B; --v-rule: #2D3441; --v-on: #121620;
    --v-f1: #BFA1EC; --v-f1s: #2A2238;
    --v-f2: #8FBCEB; --v-f2s: #18283C;
    --v-f3: #6FCBA7; --v-f3s: #15302A;
    --v-f4: #E6B561; --v-f4s: #33280F;
    --v-f0: #C4CAD6; --v-f0s: #232A36;
    --v-warn: #EE93A2; --v-warns: #3A1C22;
    --v-box: #0C0F16;
    --v-shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -18px rgba(0,0,0,.8);
    color-scheme: dark;
  }
}
html[data-site]:root[data-theme="dark"] {
  --v-paper: #121620; --v-sheet: #1A1F2A; --v-sunk: #232A36; --v-ink: #E5E8EE; --v-body: #C9CED8;
  --v-muted: #9AA2B1; --v-faint: #747C8B; --v-rule: #2D3441; --v-on: #121620;
  --v-f1: #BFA1EC; --v-f1s: #2A2238;
  --v-f2: #8FBCEB; --v-f2s: #18283C;
  --v-f3: #6FCBA7; --v-f3s: #15302A;
  --v-f4: #E6B561; --v-f4s: #33280F;
  --v-f0: #C4CAD6; --v-f0s: #232A36;
  --v-warn: #EE93A2; --v-warns: #3A1C22;
  --v-box: #0C0F16;
  --v-shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -18px rgba(0,0,0,.8);
  color-scheme: dark;
}
html[data-site] body { background: var(--v-paper); color: var(--v-ink); }
/* The display face has one weight; don't let the browser fake bold or italic versions of it. */
html[data-site] * { font-synthesis: none; }

/* ---------- course guides (and the home page) ---------- */
html[data-site~="guide"]:root {
  --bg: var(--v-paper); --surface: var(--v-sheet); --sunk: var(--v-sunk); --ink: var(--v-ink);
  --muted: var(--v-muted); --line: var(--v-rule);
  --accent: var(--v-f2); --accent-ink: var(--v-on);
  --gold: var(--v-f4); --gold-soft: var(--v-f4s);
  --red: var(--v-warn); --red-soft: var(--v-warns); --ok: var(--v-f3);
  --hadith-bg: var(--v-box); --hadith-ar: var(--v-box-gold); --hadith-en: var(--v-box-ink);
  /* topic section colours, in the order guides use them */
  --s-teal: var(--v-f3); --s-lapis: var(--v-f2); --s-plum: var(--v-f1); --s-ochre: var(--v-f4);
  --s-garnet: var(--v-warn); --s-pine: var(--v-f3); --s-slate: var(--v-f0); --s-rust: var(--v-f4);
}

/* ---------- research pages ---------- */
html[data-site~="research"]:root {
  --paper: var(--v-paper); --paper-2: var(--v-sheet); --ink: var(--v-ink); --body: var(--v-body);
  --muted: var(--v-muted); --faint: var(--v-faint); --rule: var(--v-rule); --indigo: var(--v-f2);
  --pro: var(--v-f3); --pro-bg: var(--v-f3s);          /* tells for */
  --con: var(--v-warn); --con-bg: var(--v-warns);      /* tells against */
  --mixed: var(--v-f4); --mixed-bg: var(--v-f4s);      /* both ways */
  --on-accent: var(--v-on); --fade: transparent; --shadow: var(--v-shadow);
}
/* Zayd uses its colours differently: amber = reservation (not condemnation), purple = clarification. */
html[data-site~="zayd"]:root { --con: var(--v-f4); --con-bg: var(--v-f4s); --mixed: var(--v-f1); --mixed-bg: var(--v-f1s); }
html[data-site~="mustadaf"]:root {
  --surface: var(--v-sunk); --rule-soft: var(--v-sunk); --lapis: var(--v-f2); --rubric: var(--v-warn);
  --tag-bg: var(--v-sunk); --tag-ink: var(--v-f2); --ok: var(--v-f3); --mid: var(--v-f4); --no: var(--v-warn);
}
html[data-site~="research"] .card p, html[data-site~="research"] .analysis p, html[data-site~="research"] .move p,
html[data-site~="research"] .ends > p.lead, html[data-site~="research"] .end p, html[data-site~="research"] .ends .key p,
html[data-site~="research"] .appendix > p.intro, html[data-site~="research"] .src .body p,
html[data-site~="research"] .def > p, html[data-site~="research"] .def-feat p, html[data-site~="research"] .def .contrast,
html[data-site~="research"] .def .consq, html[data-site~="research"] .hd > p.lead, html[data-site~="research"] .hadith blockquote,
html[data-site~="research"] .hadith .an, html[data-site~="research"] .hd .stance p, html[data-site~="research"] .context > p,
html[data-site~="research"] .ctx p { color: var(--v-body); }
html[data-site~="research"] .tag.valence.pro, html[data-site~="research"] .tag.valence.con, html[data-site~="research"] .tag.valence.mix,
html[data-site~="research"] .end .lbl, html[data-site~="research"] .primary-badge, html[data-site~="research"] .def-feat .ft,
html[data-site~="research"] .ctx h3 .k { color: var(--v-on); }
html[data-site~="research"] .controls { background: linear-gradient(var(--v-paper) 78%, transparent); }
html[data-site~="research"] .ar-phrase { background: var(--v-sunk); }
html[data-site~="research"] .filters button[aria-pressed="true"] { background: var(--v-f2); color: var(--v-on); border-color: var(--v-f2); }
html[data-site~="research"] .verdict-line, html[data-site~="research"] .hd .concl { background: var(--v-box); color: var(--v-box-ink); }
html[data-site~="research"] .verdict-line strong, html[data-site~="research"] .hd .concl strong { color: var(--v-box-gold); }
html[data-site~="research"] .hd .concl .open { color: #A7AEBD; }

/* Fabricated and Suppressed (deck) and its dossier: gold = accent, teal = strong grade,
   amber = moderate grade, seal = weak / redacted; the redaction bars use the ink colour. */
html[data-site~="fabricated"]:root, html[data-site~="fabricated-dossier"]:root {
  --bg: var(--v-paper); --panel: var(--v-sheet); --panel-2: var(--v-sunk); --fg: var(--v-ink); --body: var(--v-body);
  --muted: var(--v-muted); --line: var(--v-rule); --on: var(--v-on); --fade: transparent;
  --gold: var(--v-f4); --teal: var(--v-f3); --amber: var(--v-f1); --seal: var(--v-warn);
  --bar: var(--v-ink); --bar-fg: var(--v-paper);
}

/* ---------- Verb Forms (the source of the palette; only the neutrals are shared) ---------- */
html[data-site~="verb-forms"]:root {
  --paper: var(--v-paper); --sheet: var(--v-sheet); --ink: var(--v-ink); --muted: var(--v-muted); --rule: var(--v-rule);
  --f0: var(--v-f0); --f0s: var(--v-f0s); --f1: var(--v-f1); --f1s: var(--v-f1s); --f2: var(--v-f2); --f2s: var(--v-f2s);
  --f3: var(--v-f3); --f3s: var(--v-f3s); --f4: var(--v-f4); --f4s: var(--v-f4s); --warn: var(--v-warn); --warns: var(--v-warns);
}

/* ---------- Nouns, Phrases & Iʿrāb ---------- */
html[data-site~="nouns-irab"]:root {
  --paper: var(--v-paper); --sheet: var(--v-sheet); --ink: var(--v-ink); --muted: var(--v-muted); --rule: var(--v-rule);
  --lapis: var(--v-f2); --lapis-soft: var(--v-f2s); --plum: var(--v-f1); --plum-soft: var(--v-f1s);
  --malachite: var(--v-f3); --mal-soft: var(--v-f3s); --saffron: var(--v-f4); --saf-soft: var(--v-f4s);
  --madder: var(--v-warn); --mad-soft: var(--v-warns);
}

/* ---------- Ṣarf Assignment Workbook ---------- */
html[data-site~="sarf-workbook"]:root, html[data-site~="grammar-workbook"]:root {
  --bg: var(--v-paper); --surface: var(--v-sheet); --ink: var(--v-ink); --muted: var(--v-muted); --line: var(--v-rule);
  --accent: var(--v-f2); --accent-ink: var(--v-on); --accent-soft: var(--v-f2s);
  --good: var(--v-f3); --good-soft: var(--v-f3s); --bad: var(--v-warn); --bad-soft: var(--v-warns);
  --warn: var(--v-f4); --mark: var(--v-f4s); --mark-ink: var(--v-ink);
}

/* ---------- Nahrawān deck ---------- */
html[data-site~="nahrawan"]:root {
  --bg: var(--v-paper); --surface: var(--v-sheet); --ink: var(--v-ink); --muted: var(--v-muted); --line: var(--v-rule);
  --river: var(--v-f2); --river-soft: var(--v-f2s); --brass: var(--v-f4); --brass-soft: var(--v-f4s);
  --blood: var(--v-warn); --blood-soft: var(--v-warns); --land: var(--v-sunk); --sea: var(--v-f2s);
}

/* ---------- Grammar Quick Reference ----------
   Its dark teal header bars become light headers, each topic in one of the four accents, as in Verb Forms. */
html[data-site~="grammar-ref"]:root {
  --bg: var(--v-paper); --card: var(--v-sheet); --ink: var(--v-ink); --muted: var(--v-muted); --rule: var(--v-rule);
  --teal: var(--v-f2); --teal-lt: var(--v-f2);
  --amber: var(--v-f4); --amber-lt: var(--v-f4s);
  --green: var(--v-f3); --green-lt: var(--v-f3s);
  --red: var(--v-warn); --red-lt: var(--v-warns);
  --purple: var(--v-f1); --purple-lt: var(--v-f1s);
  --arabic-bg: var(--v-sunk); --arabic-border: var(--v-rule);
}
html[data-site~="grammar-ref"] .page-header { background: var(--v-paper); color: var(--v-ink); border-bottom: 1px solid var(--v-rule); }
html[data-site~="grammar-ref"] .page-header h1 { font-family: "Marcellus", serif; font-weight: 400; font-size: clamp(28px, 5vw, 40px); }
html[data-site~="grammar-ref"] .page-header .kicker { color: var(--v-f4); font-family: "IBM Plex Sans", sans-serif; }
html[data-site~="grammar-ref"] .page-header .subtitle { color: var(--v-muted); }
html[data-site~="grammar-ref"] .arabic-title { color: var(--v-f1); }
html[data-site~="grammar-ref"] .topic { --tc: var(--v-f2); --tcs: var(--v-f2s); border-top: 4px solid var(--tc); }
html[data-site~="grammar-ref"] .topic:nth-of-type(4n+1) { --tc: var(--v-f1); --tcs: var(--v-f1s); }
html[data-site~="grammar-ref"] .topic:nth-of-type(4n+3) { --tc: var(--v-f3); --tcs: var(--v-f3s); }
html[data-site~="grammar-ref"] .topic:nth-of-type(4n) { --tc: var(--v-f4); --tcs: var(--v-f4s); }
html[data-site~="grammar-ref"] .topic-header { background: var(--tcs); }
html[data-site~="grammar-ref"] .topic-header h2 { color: var(--tc); font-family: "Marcellus", serif; font-weight: 400; font-size: 20px; }
html[data-site~="grammar-ref"] .topic-header .arabic-label { color: var(--tc); }
html[data-site~="grammar-ref"] .topic-number, html[data-site~="grammar-ref"] .rule-bullet { background: var(--tc); color: var(--v-on); }
html[data-site~="grammar-ref"] .comp-table th { background: var(--tc, var(--v-f2)); color: var(--v-on); }
html[data-site~="grammar-ref"] .sign-table th { background: var(--v-f0); color: var(--v-on); }
html[data-site~="grammar-ref"] th[style*="#1a6b35"] { background: var(--v-f3) !important; }
html[data-site~="grammar-ref"] th[style*="#8b2020"] { background: var(--v-warn) !important; }
html[data-site~="grammar-ref"] th[style*="#4a2580"] { background: var(--v-f1) !important; }
html[data-site~="grammar-ref"] .comp-table tr:nth-child(even) td { background: var(--v-sunk); }
html[data-site~="grammar-ref"] .mini-card { background: var(--v-sunk); }
html[data-site~="grammar-ref"] .mini-card h4 { color: var(--tc, var(--v-f2)); }
html[data-site~="grammar-ref"] .tag-teal { background: var(--v-f2s); }
html[data-site~="grammar-ref"] .page-footer { background: transparent; color: var(--v-muted); border-top: 1px solid var(--v-rule); }