/*
 * Design tokens: the ONLY place for raw colours, sizes and fonts.
 * Components reference these custom properties; a redesign starts here.
 *
 * Palette
 *   paper   #faf7f0  warm page
 *   ink     #1c2530  deep ink with a blue cast
 *   accent  #1f5f8b  blue-teal from the book's header band
 *   gold    #a9853a  ornaments and rules, used sparingly
 *   stage   #34383c  graphite backdrop behind scanned pages
 */

:root {
  color-scheme: light;

  /* ---- Colour: light ---- */
  --color-paper: #faf7f0;
  --color-paper-raised: #fffdf8;
  --color-paper-sunken: #f2ede1;
  --color-ink: #1c2530;
  --color-ink-soft: #3a4450;
  --color-muted: #66707a;
  --color-rule: #e3dac7;
  --color-rule-strong: #cfc3a8;

  --color-accent: #1f5f8b;
  --color-accent-hover: #174b6e;
  --color-accent-soft: #e6eef4;
  --color-on-accent: #fbf8f1;
  --color-on-accent-muted: #c9dbe8;

  --color-gold: #a9853a;
  --color-gold-soft: #efe4c8;

  --color-verse-bg: #f4efe2;
  --color-verse-ink: #15324a;
  --color-hadith-bg: #f6f2e8;
  --color-note-ink: #5b6168;

  --color-stage: #34383c;
  --color-stage-ink: #e9e5dc;
  --color-page-placeholder: #ece6d8;
  --color-focus: #c58f1d;
  --color-scrim: rgb(20 26 32 / 0.45);

  /* ---- Typography ---- */
  --font-body-ar: 'Amiri', 'Noto Naskh Arabic', 'Traditional Arabic', 'Times New Roman', serif;
  --font-ui-ar: 'Noto Kufi Arabic', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  /* Latin faces first, the Arabic ones as fallback for any Arabic inside English text. */
  --font-body-en: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Amiri', serif;
  --font-ui-en: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Kufi Arabic', sans-serif;
  --font-body: var(--font-body-ar);
  --font-quran: 'Amiri Quran', 'KFGQPC Uthmanic Script HAFS', 'Amiri', 'Noto Naskh Arabic', serif;
  --font-ui: var(--font-ui-ar);

  /* Modular scale, ratio 1.25 on a 1rem (16px) root. Arabic naskh sets small,
     so reading text uses step-1. */
  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.5625rem;
  --step-3: 1.953rem;
  --step-4: 2.441rem;
  --step-5: 3.052rem;

  --leading-body: 2;
  --leading-tight: 1.45;
  --leading-ui: 1.6;
  --weight-regular: 400;
  --weight-bold: 700;

  /* Reading measure and user-controlled scale (book.js sets --reading-scale). */
  --measure: 40em;
  --reading-scale: 1;

  /* ---- Space (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* ---- Shape ---- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-pill: 999px;
  --border-hair: 1px;

  /* ---- Elevation ---- */
  --shadow-raised: 0 1px 2px rgb(40 30 10 / 0.08), 0 2px 8px rgb(40 30 10 / 0.06);
  --shadow-drawer: 0 0 32px rgb(10 20 30 / 0.25);
  --shadow-page: 0 1px 2px rgb(0 0 0 / 0.35), 0 8px 24px rgb(0 0 0 / 0.35);

  /* ---- Layout ---- */
  --header-height: 3.75rem;
  --toolbar-height: 3.25rem;
  --sidebar-width: 19rem;
  --content-max: 76rem;

  /* ---- Motion ---- */
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---- Stacking ---- */
  --z-progress: 30;
  --z-header: 40;
  --z-scrim: 50;
  --z-drawer: 60;
  --z-skip: 100;
}

/* ---- Colour: dark (system preference unless the user chose light) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --color-paper: #171b1f;
    --color-paper-raised: #1e2328;
    --color-paper-sunken: #13171a;
    --color-ink: #e8e3d6;
    --color-ink-soft: #cdc7b9;
    --color-muted: #9aa2aa;
    --color-rule: #2e353b;
    --color-rule-strong: #414a52;
    --color-accent: #7fb3d9;
    --color-accent-hover: #a3c9e6;
    --color-accent-soft: #1d2f3d;
    --color-on-accent: #f3efe6;
    --color-on-accent-muted: #b5cde0;
    --color-gold: #c9a95e;
    --color-gold-soft: #3a3222;
    --color-verse-bg: #1f2529;
    --color-verse-ink: #dfe8ef;
    --color-hadith-bg: #1c2125;
    --color-note-ink: #a8afb5;
    --color-stage: #0f1215;
    --color-page-placeholder: #262b30;
    --color-focus: #e2b04a;
    --color-scrim: rgb(0 0 0 / 0.55);
  }
}

/* Manual toggle wins over the system setting. Keep in sync with the block above. */
:root[data-theme='dark'] {
  color-scheme: dark;
  --color-paper: #171b1f;
  --color-paper-raised: #1e2328;
  --color-paper-sunken: #13171a;
  --color-ink: #e8e3d6;
  --color-ink-soft: #cdc7b9;
  --color-muted: #9aa2aa;
  --color-rule: #2e353b;
  --color-rule-strong: #414a52;
  --color-accent: #7fb3d9;
  --color-accent-hover: #a3c9e6;
  --color-accent-soft: #1d2f3d;
  --color-on-accent: #f3efe6;
  --color-on-accent-muted: #b5cde0;
  --color-gold: #c9a95e;
  --color-gold-soft: #3a3222;
  --color-verse-bg: #1f2529;
  --color-verse-ink: #dfe8ef;
  --color-hadith-bg: #1c2125;
  --color-note-ink: #a8afb5;
  --color-stage: #0f1215;
  --color-page-placeholder: #262b30;
  --color-focus: #e2b04a;
  --color-scrim: rgb(0 0 0 / 0.55);
}

/* Header band stays the book's blue in both themes. */
:root {
  --color-band: #1f5f8b;
  --color-band-deep: #194d71;
  --color-band-ornament: #e2c57f;
}
:root[data-theme='dark'] {
  --color-band: #18496b;
  --color-band-deep: #133a55;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --color-band: #18496b;
    --color-band-deep: #133a55;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
  }
}

/* ---- Per-language type: follows lang="" so Arabic islands on English pages
   (the book text, the "العربية" switch) keep the Arabic faces, and vice versa. ---- */
[lang|='en'] {
  --font-body: var(--font-body-en);
  --font-ui: var(--font-ui-en);
  --leading-body: 1.7; /* Latin text needs less leading than naskh */
}
[lang|='ar'] {
  --font-body: var(--font-body-ar);
  --font-ui: var(--font-ui-ar);
  --leading-body: 2;
}