/* Noor web theme v1 · tokens.css
 * One source of color, type, space and motion for home, reader, library, search, about and privacy.
 * Values come from the Noor app (noor-data.jsx TOKENS, WidgetPalette.kt). Contrast ratios are WCAG 2.x,
 * measured on the theme's page background unless noted.
 *
 * Themes: paper (default light), sepia, night (warm dark), emerald (brand dark).
 * Set data-theme on <html>. With no data-theme, the system preference picks paper or night.
 * Tokens also work on any element with data-theme, so previews can show several themes on one page.
 */

:root,
html[data-theme="paper"] {
  --paper: #FBF6E8;            /* page */
  --surface: #FFFBEE;          /* cards, sheets */
  --surface-alt: #F5EFD8;      /* wells, inputs, chips */
  --surface-raised: #FFFFFF;   /* menus over cards */
  --ink: #1F1A12;              /* 16.0:1 */
  --ink-soft: #5E5038;         /* 7.3:1, secondary text */
  --ink-faint: #8A7A5C;        /* 3.9:1, ONLY for disabled text and 24px+ */
  --gold-ink: #7A5A1A;         /* 5.9:1, small gold text (kickers, verse badges) */
  --gold: #C9A04A;             /* 2.3:1, decorative only: rules, rings, ornaments */
  --gold-light: #E2CD91;       /* text on emerald, 7.4:1 */
  --emerald: #183F34;          /* brand deep, 10.8:1 as text */
  --accent: #2D6A4F;           /* links, primary buttons, 5.9:1 */
  --accent-strong: #1F5641;    /* hover / pressed */
  --on-accent: #FFFFFF;        /* 6.4:1 on accent */
  --on-emerald: #FBF6E8;       /* 10.8:1 on emerald */
  --danger: #A04040;
  --border: rgba(31, 26, 18, 0.12);
  --border-strong: rgba(122, 90, 26, 0.35);
  --focus: #183F34;            /* 10.8:1 focus ring */
  --highlight: rgba(201, 160, 74, 0.22);       /* playing ayah, selected word */
  --highlight-strong: rgba(201, 160, 74, 0.38);
  --scrim: rgba(20, 16, 10, 0.45);
  --shadow-1: 0 1px 2px rgba(31, 26, 18, 0.06), 0 2px 8px rgba(31, 26, 18, 0.05);
  --shadow-2: 0 8px 28px rgba(31, 26, 18, 0.12);
  --hero-bg: #183F34;
  --hero-ink: #FBF6E8;
  --hero-soft: #C8D6CC;        /* 7.8:1 on hero */
  --hero-accent: #E2CD91;
  color-scheme: light;
}

html[data-theme="sepia"] {
  --paper: #F3EAD3;
  --surface: #FAF3E0;
  --surface-alt: #EADFC2;
  --surface-raised: #FFF9EA;
  --ink: #2A2014;              /* 13.3:1 */
  --ink-soft: #5A4A30;         /* 7.1:1 */
  --ink-faint: #8A7856;
  --gold-ink: #74551A;         /* 5.7:1 */
  --accent: #2D6A4F;           /* 5.3:1 */
  --accent-strong: #1F5641;
  --border: rgba(42, 32, 20, 0.14);
  --border-strong: rgba(116, 85, 26, 0.38);
  --focus: #183F34;
  color-scheme: light;
}

html[data-theme="night"] {
  --paper: #14100A;
  --surface: #1C150C;
  --surface-alt: #251C11;
  --surface-raised: #2C2215;
  --ink: #E8DCC0;              /* 13.9:1 */
  --ink-soft: #C2B494;         /* 9.3:1 */
  --ink-faint: #A8997A;        /* 6.8:1 */
  --gold-ink: #E2CD91;         /* 12.1:1 */
  --gold: #C9A04A;
  --gold-light: #E2CD91;
  --emerald: #183F34;
  --accent: #8FC7A8;           /* 9.8:1, links and primary buttons */
  --accent-strong: #A9D6BC;
  --on-accent: #14100A;        /* 9.8:1 on accent */
  --on-emerald: #FBF6E8;
  --danger: #E08A8A;
  --border: rgba(232, 220, 192, 0.14);
  --border-strong: rgba(226, 205, 145, 0.35);
  --focus: #E2CD91;
  --highlight: rgba(226, 205, 145, 0.16);
  --highlight-strong: rgba(226, 205, 145, 0.28);
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 10px 32px rgba(0, 0, 0, 0.55);
  --hero-bg: #0E1F1A;
  --hero-ink: #E8E2CF;
  --hero-soft: #BFC9BE;
  --hero-accent: #E2CD91;
  color-scheme: dark;
}

html[data-theme="emerald"] {
  --paper: #0E1F1A;
  --surface: #132A23;
  --surface-alt: #18332A;
  --surface-raised: #1D3B31;
  --ink: #E8E2CF;              /* 13.2:1 */
  --ink-soft: #BFC9BE;         /* 10.0:1 */
  --ink-faint: #9FB0A5;
  --gold-ink: #E2CD91;         /* 10.9:1 */
  --gold: #C9A04A;
  --gold-light: #E2CD91;
  --emerald: #183F34;
  --accent: #8FC7A8;           /* 8.9:1 */
  --accent-strong: #A9D6BC;
  --on-accent: #0E1F1A;
  --on-emerald: #FBF6E8;
  --danger: #E08A8A;
  --border: rgba(232, 226, 207, 0.14);
  --border-strong: rgba(226, 205, 145, 0.35);
  --focus: #E2CD91;
  --highlight: rgba(226, 205, 145, 0.16);
  --highlight-strong: rgba(226, 205, 145, 0.28);
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 10px 32px rgba(0, 0, 0, 0.55);
  --hero-bg: #183F34;
  --hero-ink: #FBF6E8;
  --hero-soft: #C8D6CC;
  --hero-accent: #E2CD91;
  color-scheme: dark;
}

/* System dark when the person has not chosen a theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --paper: #14100A; --surface: #1C150C; --surface-alt: #251C11; --surface-raised: #2C2215;
    --ink: #E8DCC0; --ink-soft: #C2B494; --ink-faint: #A8997A; --gold-ink: #E2CD91;
    --accent: #8FC7A8; --accent-strong: #A9D6BC; --on-accent: #14100A; --danger: #E08A8A;
    --border: rgba(232, 220, 192, 0.14); --border-strong: rgba(226, 205, 145, 0.35);
    --focus: #E2CD91; --highlight: rgba(226, 205, 145, 0.16); --highlight-strong: rgba(226, 205, 145, 0.28);
    --scrim: rgba(0, 0, 0, 0.6); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 10px 32px rgba(0, 0, 0, 0.55);
    --hero-bg: #0E1F1A; --hero-ink: #E8E2CF; --hero-soft: #BFC9BE; --hero-accent: #E2CD91;
    color-scheme: dark;
  }
}

:root {
  /* Type families. Production self-hosts WOFF2 with unicode-range. */
  --font-quran: "Amiri Quran", serif;                       /* Quran text ONLY, no other fallbacks */
  --font-ar: "Amiri", "Noto Naskh Arabic", serif;           /* Arabic UI and tafseer */
  --font-ar-small: "Noto Naskh Arabic", "Amiri", serif;     /* Arabic text under 1rem */
  --font-display: "Cormorant Garamond", "Marcellus", Georgia, serif;     /* Latin display, weight 600 */
  --font-ui: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-kufi: "Reem Kufi", "Amiri", serif;                 /* decorative only */

  /* Type scale (mobile first; desktop overrides below) */
  --fs-quran: 1.85rem;       /* verse mode, user scale multiplies this */
  --fs-quran-page: 1.75rem;  /* mushaf page */
  --fs-h1: 2.25rem;
  --fs-h2: 1.6rem;
  --fs-h3: 1.15rem;
  --fs-body: 1rem;
  --fs-body-ar: 1.125rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.75rem;        /* floor, labels only */
  --quran-scale: 1;          /* reader setting: 0.85 to 1.6 */

  /* Space (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* Shape */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  /* Layout */
  --measure: 44rem;          /* reading column */
  --page-max: 72rem;         /* site container */
  --header-h: 64px;
  --player-h: 72px;
  --tap: 44px;               /* minimum hit target */

  /* Motion */
  --ease: cubic-bezier(0.3, 0.7, 0.3, 1);
  --dur-1: 120ms; --dur-2: 220ms; --dur-3: 360ms;
}

@media (min-width: 900px) {
  :root {
    --fs-quran: 2.1rem;
    --fs-quran-page: 2rem;
    --fs-h1: 3rem;
    --fs-h2: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}

/* Migration aliases: old variable names from site.css and reader.css, removed after Phase 1 */
:root {
  --bg: var(--paper);
  --green: var(--emerald);
  --green-soft: var(--accent);
  --emerald-dark: var(--emerald);
  --gold-old: var(--gold-ink);
}