/* ==========================================================================
   Design tokens
   Strict black-and-white palette: pure white (light) and true AMOLED black (dark).
   Colour is reserved for meaning (evidence badges) and the logo. All text meets WCAG AA.
   ========================================================================== */

/* Qur'anic Arabic in the IndoPak script familiar across South Asia.
   DigitalKhatt IndoPak font, SIL Open Font License 1.1 (see assets/fonts/OFL-indopak.txt). */
@font-face {
  font-family: "IndoPak Quran";
  src: url("../fonts/indopak.woff2") format("woff2");
  font-display: swap;
}

:root {
  /* Type families */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-legible: "Atkinson Hyperlegible", var(--font-sans);
  --font-quran: "IndoPak Quran", "Noto Naskh Arabic", serif;
  --font-arabic: "Noto Naskh Arabic", "Amiri", serif;
  --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;

  --font-body: var(--font-sans);
  --font-display: var(--font-serif);

  /* Type scale (fluid). --text-scale is changed by the reading settings. */
  --text-scale: 1;
  --fs-base: calc(1.0625rem * var(--text-scale));            /* 17px */
  --fs-sm: calc(0.9375rem * var(--text-scale));
  --fs-xs: calc(0.8125rem * var(--text-scale));
  --fs-lg: calc(1.1875rem * var(--text-scale));
  --fs-h3: calc(clamp(1.2rem, 1.1rem + 0.35vw, 1.4rem) * var(--text-scale));
  --fs-h2: calc(clamp(1.55rem, 1.3rem + 0.9vw, 2.1rem) * var(--text-scale));
  --fs-h1: calc(clamp(2.1rem, 1.6rem + 2vw, 3.3rem) * var(--text-scale));
  --fs-display: clamp(2.6rem, 1.6rem + 4.2vw, 5.4rem);
  --arabic-scale: 1;
  --fs-quran: calc(clamp(1.55rem, 1.35rem + 0.7vw, 2rem) * var(--arabic-scale));

  --lh-body: 1.72;
  --lh-tight: 1.2;
  --measure: 72ch;

  /* Space */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem;
  --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem;

  /* Layout */
  --topbar-h: 64px;
  --sidebar-w: 292px;
  --rail-w: 248px;
  --gutter: clamp(1rem, 0.5rem + 2.2vw, 3rem);
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 180ms;
}

/* ---------- Light: pure white and ink ---------- */
:root,
[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-elev: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f4f4;
  --surface-3: #e9e9e9;
  --text: #0a0a0a;
  --text-2: #3b3b3b;
  --muted: #5e5e5e;
  --border: #e4e4e4;
  --border-strong: #c9c9c9;
  --accent: #0a0a0a;          /* monochrome: the accent is ink */
  --accent-soft: #ededed;
  --accent-ink: #000000;
  --link: #0a0a0a;
  --focus: #0a0a0a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px -10px rgba(0, 0, 0, .16);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .32);
  --scrim: rgba(0, 0, 0, .42);

  /* Evidence status tints (kept for meaning; muted so the page stays monochrome) */
  --st-established: #2b6450;  --st-established-bg: #e8f1ec;
  --st-interpretive: #6b5423; --st-interpretive-bg: #f3eee2;
  --st-debated: #3a5580;      --st-debated-bg: #e8edf5;
  --st-unseen: #56477d;       --st-unseen-bg: #eeebf5;
  --st-caution: #92372c;      --st-caution-bg: #f7e7e4;

  /* The "space" panels stay black in both themes */
  --space-bg: #000000;
  --space-text: #f2f2f2;
}

/* ---------- Dark: true AMOLED black ---------- */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --bg-elev: #0b0b0b;
  --surface: #0b0b0b;
  --surface-2: #121212;
  --surface-3: #1b1b1b;
  --text: #f2f2f2;
  --text-2: #c4c4c4;
  --muted: #9b9b9b;
  --border: #1f1f1f;
  --border-strong: #333333;
  --accent: #ffffff;
  --accent-soft: #1c1c1c;
  --accent-ink: #ffffff;
  --link: #f2f2f2;
  --focus: #ffffff;
  --shadow-sm: 0 0 0 1px rgba(255, 255, 255, .02);
  --shadow: 0 0 0 1px rgba(255, 255, 255, .03);
  --shadow-lg: 0 30px 70px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .05);
  --scrim: rgba(0, 0, 0, .72);

  --st-established: #86c9ad; --st-established-bg: #0d1a14;
  --st-interpretive: #d6bd84; --st-interpretive-bg: #1a160c;
  --st-debated: #9db6e0;      --st-debated-bg: #0e1522;
  --st-unseen: #bba9e6;       --st-unseen-bg: #161226;
  --st-caution: #eb9c8f;      --st-caution-bg: #221110;

  --space-bg: #000000;
}

/* No-JS fallback: follow the operating system */
@media (prefers-color-scheme: dark) {
  html:not(.js) {
    color-scheme: dark;
    --bg: #000000; --bg-elev: #0b0b0b; --surface: #0b0b0b; --surface-2: #121212; --surface-3: #1b1b1b;
    --text: #f2f2f2; --text-2: #c4c4c4; --muted: #9b9b9b; --border: #1f1f1f; --border-strong: #333333;
    --accent: #ffffff; --accent-soft: #1c1c1c; --accent-ink: #ffffff; --link: #f2f2f2;
  }
}

/* ---------- Reading preferences ---------- */
[data-text-size="s"]  { --text-scale: .92; }
[data-text-size="l"]  { --text-scale: 1.1; }
[data-text-size="xl"] { --text-scale: 1.22; }
[data-arabic-size="l"]  { --arabic-scale: 1.18; }
[data-arabic-size="xl"] { --arabic-scale: 1.36; }
[data-font="serif"]   { --font-body: var(--font-serif); }
[data-font="legible"] { --font-body: var(--font-legible); --font-display: var(--font-legible); }