/* Aus replica/design/tokens.json generiert. Nur Rollen, /replica-brand ändert die Werte. */
:root {
  --c-bg: #f7f7fa;
  --c-surface: #ffffff;
  --c-surface-raised: #ffffff;
  --c-border: #e6e6ee;
  --c-border-input: #8a8a99;
  --c-text: #16161d;
  --c-text-muted: #5c5c6b;
  --c-accent: #334155;
  --c-accent-soft: #e8ebf0;
  --c-on-accent: #ffffff;
  --c-ink: #111114;
  --c-on-ink: #ffffff;
  --c-done: #5fd3b0;
  --c-on-done: #0b3b2e;
  --c-danger: #c2283a;
  --c-success: #1d7a55;
  --c-warning: #a85a00;
  --c-badge: #c42f36;
  --c-on-badge: #ffffff;
  --c-metric-hasanat: #c2255c;
  --c-metric-hasanat-soft: #fde8ef;
  --c-metric-verses: #1f63b8;
  --c-metric-verses-soft: #e6f0fc;
  --c-metric-time: #9c4800;
  --c-metric-time-soft: #fdeedd;
  --c-metric-pages: #137a5a;
  --c-metric-pages-soft: #e2f6ef;
  --c-reader-bg: #0c0a08;
  --c-reader-surface: #ffffff;
  --c-reader-text: #16161d;
  --c-reader-muted: #5c5c6b;
  --c-reader-translation: #e9eaf0;
  --c-reader-sepia-bg: #f4ecd8;
  --c-reader-sepia-text: #3b2f20;
  --c-scrim: rgba(15, 17, 23, .6);
  --c-light-bg: #f7f7fa;
  /* Neonblau für den Rand nach dem 100-fachen Tahlīl (nur Leuchten, nie Textfarbe) */
  --c-neon: #22d3ff;
  /* Meer-Animation (Subḥāna-llāhi wa bi-ḥamdih) */
  --c-sea-sky-top: #9fd8f2;
  --c-sea-sky-bottom: #e6f6fc;
  --c-sea-sun: #ffd27a;
  --c-sea-top: #2a9fd0;
  --c-sea-bottom: #0b3d63;
  --c-sea-wave1: #4fb8df;
  --c-sea-wave2: #1f86b8;
  --c-sea-wave3: #145f8f;
  --c-sea-foam: #ffffff;
  --c-sea-ink: #0b3d63;
  /* Kategorie-Karten (Startseite): je Kategorie ein dunkler Bildgrund + Gold */
  --c-feat-gold: #f3c969;
  --c-feat-gold-2: #d9a441;
  --c-feat-cream: #fff7e3;
  --c-feat-hisn-a: #0d4f4a;
  --c-feat-hisn-b: #1f8b78;
  --c-feat-ramadan-a: #1b1f4f;
  --c-feat-ramadan-b: #3d4796;
  --c-feat-khatm-a: #6b2a14;
  --c-feat-khatm-b: #c0612a;
  --c-feat-hifz-a: #4a1f5e;
  --c-feat-hifz-b: #9a4a8c;
  /* Hisnul-Muslim-Kacheln: Edelsteintöne je Kategorie (a = unten/dunkel, b = oben/heller) */
  --c-hx-adhkar-a: #1d2257; --c-hx-adhkar-b: #d08a3c;
  --c-hx-lob-a: #0b3f33; --c-hx-lob-b: #1f7d5c;
  --c-hx-essen-a: #3a3f14; --c-hx-essen-b: #7a8231;
  --c-hx-freude-a: #4d1d38; --c-hx-freude-b: #b0577a;
  --c-hx-gebet-a: #0e2445; --c-hx-gebet-b: #2b5b94;
  --c-hx-manieren-a: #0d3f4a; --c-hx-manieren-b: #2a8494;
  --c-hx-hajj-a: #221d19; --c-hx-hajj-b: #6a5844;
  --c-hx-heim-a: #351a45; --c-hx-heim-b: #7f468a;
  --c-hx-krankheit-a: #1c2a3b; --c-hx-krankheit-b: #4c6884;
  --c-hx-natur-a: #10361f; --c-hx-natur-b: #3b8048;
  --c-hx-reise-a: #4a2c12; --c-hx-reise-b: #b97d32;
  --c-hx-kaaba: #121010;
  --c-hx-date: #5b2a10;
  /* Entdecken: Suche und Challenges */
  --c-feat-search-a: #0f2f4d; --c-feat-search-b: #2c6aa0;
  --c-feat-kinder-a: #12406b; --c-feat-kinder-b: #3a9ad9;
  --c-hx-kahf-a: #1a2a30; --c-hx-kahf-b: #4f7d86;
  --c-hx-mulk-a: #0a1030; --c-hx-mulk-b: #2b3778;
  --c-hx-yasin-a: #0d3a2c; --c-hx-yasin-b: #2a7a5a;
  --c-hx-amma-a: #3a142c; --c-hx-amma-b: #8a3b5c;
  --c-hx-quran-a: #10233a; --c-hx-quran-b: #3a628f;
  --c-hx-cover: #6a1b1f;
  /* Lesen: Weiterlesen-Bild und Surah-Sterne (Mekka = Sandgold, Medina = Smaragd, Juz = Weinrot) */
  --c-hx-read-a: #10303a; --c-hx-read-b: #2f6f7a;
  --c-sm-mekka: #8a5a1c;
  --c-sm-medina: #145c45;
  --c-sm-juz: #6e2347;
  /* Tagesziel-Karte: Himmel je Tageszeit (a = oben, b = unten) */
  --c-tz-morgen-a: #fbe3c4; --c-tz-morgen-b: #fdf4e6;
  --c-tz-tag-a: #d6e9f8; --c-tz-tag-b: #f1f7fc;
  --c-tz-abend-a: #f4cfc9; --c-tz-abend-b: #fbe9dc;
  --c-tz-nacht-a: #161b47; --c-tz-nacht-b: #2c3778;
  --c-tz-met-a: #0b4636; --c-tz-met-b: #1d7a5a;
  --c-feat-progress-a: #4a1d1f; --c-feat-progress-b: #a24a3c;
  /* Fasten: Abenddämmerung (Fastenbrechen) und Vollmondnacht */
  --c-feat-fasten-a: #2c1838; --c-feat-fasten-b: #b4583a;
  --c-hx-modo-a: #2c1838; --c-hx-modo-b: #c86a3c;
  --c-hx-weiss-a: #0a1230; --c-hx-weiss-b: #2a3b78;
  --c-fs-water: #cfe7f3;
  /* Fasten-Feier (abgehakt): Nacht, Glut, Feuer, Gold, Schild */
  --c-fc-night-a: #1d1430; --c-fc-night-b: #3a2350; --c-fc-ember: #6a2a24;
  --c-fc-fire-a: #ff9a3c; --c-fc-fire-b: #e2462a; --c-fc-fire-c: #ffd27a;
  --c-fc-gold: #e8c37a; --c-fc-gold-2: #f6dfa6; --c-fc-cream: #fff4dc; --c-fc-ink: #3a2410;
  --c-fc-shield: #2b4b8a;
  /* Das Gebet: Smaragd-Nacht, Fluss in Türkis */
  --c-feat-gebet-a: #0b3a40; --c-feat-gebet-b: #1f7a74;
  --c-pc-sky-a: #071c24; --c-pc-sky-b: #10404a;
  --c-pc-river-1: #1b7d8a; --c-pc-river-2: #2a9fb0; --c-pc-river-3: #4fc3cf;
  --c-pc-speck: #3a2a22;
  /* Kennzahl-Kacheln (a = dunkel, b = hell) */
  --c-st-hasanat-a: #5e1631; --c-st-hasanat-b: #b2416b;
  --c-st-verses-a: #13305e; --c-st-verses-b: #2f63a8;
  --c-st-time-a: #5a2a08; --c-st-time-b: #b0661e;
  --c-st-pages-a: #0b4636; --c-st-pages-b: #1f7d5c;
  --c-tz-ink: #1f1b2e; --c-tz-ink-muted: #574f63; --c-tz-on-ink: #fff7e3;
  --c-dark-bg: #0c0a08;
  --c-dark-surface: #17161c;
  /* Hintergrund-Ornament wie auf der Quran-Wird-Seite: achtzackiger Stern im 120-px-Raster, Gold sehr zart */
  --bg-pattern-dark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'><g fill='none' stroke='%23c9a45a' stroke-opacity='0.09' stroke-width='1'><rect x='28' y='28' width='44' height='44'/><rect x='28' y='28' width='44' height='44' transform='rotate(45 50 50)'/><circle cx='50' cy='50' r='9'/><path d='M50 0v19M50 81v19M0 50h19M81 50h19'/><rect x='-12' y='-12' width='24' height='24' transform='rotate(45 0 0)'/><rect x='88' y='-12' width='24' height='24' transform='rotate(45 100 0)'/><rect x='-12' y='88' width='24' height='24' transform='rotate(45 0 100)'/><rect x='88' y='88' width='24' height='24' transform='rotate(45 100 100)'/></g></svg>");
  --bg-pattern-light: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'><g fill='none' stroke='%239a7a3a' stroke-opacity='0.10' stroke-width='1'><rect x='28' y='28' width='44' height='44'/><rect x='28' y='28' width='44' height='44' transform='rotate(45 50 50)'/><circle cx='50' cy='50' r='9'/><path d='M50 0v19M50 81v19M0 50h19M81 50h19'/><rect x='-12' y='-12' width='24' height='24' transform='rotate(45 0 0)'/><rect x='88' y='-12' width='24' height='24' transform='rotate(45 100 0)'/><rect x='-12' y='88' width='24' height='24' transform='rotate(45 0 100)'/><rect x='88' y='88' width='24' height='24' transform='rotate(45 100 100)'/></g></svg>");
  --bg-pattern: var(--bg-pattern-light);
  /* Lese-Hintergrund „Nacht" = derselbe Grund wie die App */
  --c-reader-pattern: var(--bg-pattern-dark);
  /* Deckkraft der Muster; die Muster-Designs (designs.css) setzen eigene Werte */
  --bg-pattern-op: 1;
  --reader-pattern-op: 1;
  --c-dark-text: #eceef4;
  --c-dark-text-muted: #a3a7b5;
  --font-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-arabic: 'KFGQPC Uthmanic Script', 'Amiri Quran', 'Scheherazade New', serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-xs: 12px; --leading-xs: 16px; --weight-xs: 500;
  --text-sm: 14px; --leading-sm: 20px; --weight-sm: 400;
  --text-base: 16px; --leading-base: 24px; --weight-base: 400;
  --text-lg: 20px; --leading-lg: 28px; --weight-lg: 600;
  --text-xl: 28px; --leading-xl: 34px; --weight-xl: 700;
  --text-display: 40px; --leading-display: 44px; --weight-display: 700;
  --text-arabic: 28px; --leading-arabic: 56px; --weight-arabic: 400;
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(22,22,29,.04), 0 2px 8px rgba(22,22,29,.06);
  --shadow-pop: 0 16px 40px rgba(22,22,29,.18);
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 400ms;
  --motion-ease: cubic-bezier(.2,.8,.2,1);
  --max-width: 480px;
  --gutter: 16px;
  --tabbar-height: 64px;
  --header-height: 56px;
}

/* Dark Theme: per Einstellung oder System */
:root[data-theme="dark"] {
  --c-danger: #ff8a94;
  --bg-pattern: var(--bg-pattern-dark);
  --c-bg: var(--c-dark-bg);
  --c-surface: var(--c-dark-surface);
  --c-surface-raised: var(--c-dark-surface);
  --c-text: var(--c-dark-text);
  --c-text-muted: var(--c-dark-text-muted);
  --c-border: #34323b;
  --c-metric-hasanat-soft: #3a1f2a;
  --c-metric-verses-soft: #1c2a3d;
  --c-metric-time-soft: #3a2a1a;
  --c-metric-pages-soft: #183229;
  --c-accent-soft: #24232b;
  --c-metric-hasanat: #f38bb0;
  --c-metric-verses: #7fb2f0;
  --c-metric-time: #f0a860;
  --c-metric-pages: #5fd0a8;
  --c-accent: #cbd5e1;
  --c-on-accent: #0f1117;
  --c-ink: #f2f3f7;
  --c-on-ink: #0f1117;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-danger: #ff8a94;
    --bg-pattern: var(--bg-pattern-dark);
    --c-bg: var(--c-dark-bg);
    --c-surface: var(--c-dark-surface);
    --c-surface-raised: var(--c-dark-surface);
    --c-text: var(--c-dark-text);
    --c-text-muted: var(--c-dark-text-muted);
    --c-border: #34323b;
    --c-metric-hasanat-soft: #3a1f2a;
    --c-metric-verses-soft: #1c2a3d;
    --c-metric-time-soft: #3a2a1a;
    --c-metric-pages-soft: #183229;
    --c-accent-soft: #24232b;
    --c-metric-hasanat: #f38bb0;
    --c-metric-verses: #7fb2f0;
    --c-metric-time: #f0a860;
    --c-metric-pages: #5fd0a8;
    --c-accent: #cbd5e1;
    --c-on-accent: #0f1117;
    --c-ink: #f2f3f7;
    --c-on-ink: #0f1117;
  }
}

/* Reader-Themes: Nacht (Standard), Hell, Sepia. Gesetzt als data-reader auf <html>. */
:root { --c-reader-border: transparent; }
[data-reader="hell"] {
  --c-reader-pattern: var(--bg-pattern-light);
  --c-reader-bg: #eef0f4;
  --c-reader-surface: #ffffff;
  --c-reader-text: #16161d;
  --c-reader-muted: #5c5c6b;
  --c-reader-translation: #23232c;
  --c-reader-border: #dcdfe6;
}
[data-reader="sepia"] {
  --c-reader-pattern: var(--bg-pattern-light);
  --c-reader-bg: var(--c-reader-sepia-bg);
  --c-reader-surface: #fbf6ea;
  --c-reader-text: var(--c-reader-sepia-text);
  --c-reader-muted: #6b5a43;
  --c-reader-translation: var(--c-reader-sepia-text);
  --c-reader-border: #e3d6b8;
}

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

/* Witr-Feier: Nachthimmel und Moschee-Silhouette (feste Kunstfarben, in beiden Modi gleich) */
:root {
  --c-wc-sky: #132c4a;
  --c-wc-night: #07111f;
  --c-wc-sil: #050c16;
}
:root {
  --c-wc-cloud: #2a3560;
}