/* =========================================================================
   TOKENS — the design system's single source of truth.
   Primitives are raw values; semantic tokens are what components consume.
   Themes rebind the semantic layer only, so components never know the theme.
   ========================================================================= */

:root {
  /* ---- Primitives: Emerald (primary accent) ---- */
  --emerald-50:  #ECFDF5;
  --emerald-100: #D1FAE5;
  --emerald-200: #A7F3D0;
  --emerald-300: #6EE7B7;
  --emerald-400: #34D399;
  --emerald-500: #10B981;
  --emerald-600: #059669;
  --emerald-700: #047857;
  --emerald-800: #065F46;
  --emerald-900: #064E3B;
  --emerald-950: #022C22;

  /* ---- Primitives: Gold (secondary / ornament) ---- */
  --gold-100: #FEF3C7;
  --gold-200: #FDE68A;
  --gold-300: #FCD34D;
  --gold-400: #FBBF24;
  --gold-500: #F59E0B;
  --gold-600: #D97706;
  --gold-700: #B45309;
  --gold-800: #92400E;

  /* ---- Primitives: Slate (text / structure) ---- */
  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;
  --slate-950: #020617;

  /* ---- Primitives: Parchment ---- */
  --parchment-50: #FDFBF7;
  --parchment-100: #F8F4EC;
  --parchment-200: #EFE7D8;
  --parchment-300: #E2D5BE;

  /* ---- Typography ---- */
  --font-ui: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, -apple-system,
             'Segoe UI', Roboto, sans-serif;
  --font-arabic: 'Amiri Quran', 'Scheherazade New', 'Traditional Arabic',
                 'Geeza Pro', serif;
  --font-arabic-alt: 'Scheherazade New', 'Amiri Quran', serif;
  /* Tafsir prose is Latin but sprinkled with Arabic ligatures such as ﷺ
     (U+FDFA). Font fallback is per-glyph, so the Arabic faces must appear
     before a generic family — a generic always resolves and ends the walk. */
  --font-prose: 'Plus Jakarta Sans', 'Inter', 'Amiri Quran', 'Scheherazade New',
                ui-sans-serif, system-ui, sans-serif;

  /* Static UI scale (a minor-third-ish ramp) */
  --text-2xs:  0.6875rem;  /*  11px */
  --text-xs:   0.75rem;    /*  12px */
  --text-sm:   0.8125rem;  /*  13px */
  --text-base: 0.9375rem;  /*  15px */
  --text-md:   1.0625rem;  /*  17px */
  --text-lg:   1.25rem;    /*  20px */
  --text-xl:   1.5rem;     /*  24px */
  --text-2xl:  1.875rem;   /*  30px */
  --text-3xl:  2.375rem;   /*  38px */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-widest: 0.14em;

  /* Plus Jakarta Sans draws a 0.1875em space, against roughly 0.224em for the
     system sans — and the browser rounds that advance to a whole pixel, so at
     13px semibold it renders at 0.154em and two-word labels read as one
     ("AmiriQuran"). This restores a normal word gap. Applied to --font-ui text
     only: the Arabic faces already space generously, and mushaf spacing is not
     ours to nudge — see the opt-out list in fonts.css. */
  --word-space-ui: 0.035em;

  /* Reader type — rewritten at runtime by the settings drawer sliders.
     Diacritics need vertical room, hence the very loose Arabic leading. */
  --arabic-size: 2rem;
  --arabic-leading: 2.35;
  --translation-size: 1rem;
  --translation-leading: 1.85;

  /* ---- Space (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 28px;
  --radius-full: 999px;

  /* ---- Layout ---- */
  --shell-max: 1180px;
  --reader-max: 820px;
  /* Shared height for controls that sit on one row, so the search field and
     the Surah/Juz tabs align exactly rather than to within a pixel or two. */
  --control-h: 52px;
  --header-h: 68px;
  --player-h: 78px;
  --mobile-nav-h: 62px;
  /* How far the tab bar is extended past the bottom edge, so an overscroll
     bounce that lifts it reveals more bar instead of a gap. Below the fold. */
  --nav-overscroll: 80px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 130ms;
  --dur-base: 220ms;
  --dur-slow: 380ms;


  /* Fixed-polarity tokens: these sit on the accent gradient or on a scrim,
     so they are deliberately the same in every theme. */
  --on-accent: #FFFFFF;
  --on-accent-soft: rgba(255, 255, 255, 0.16);
  --on-accent-soft-hover: rgba(255, 255, 255, 0.26);
  --on-accent-border: rgba(255, 255, 255, 0.28);
  --on-accent-dim: rgba(255, 255, 255, 0.75);
  /* Secondary text on the accent gradient. 0.90 rather than the 0.82 it used
     to fade to: below ~0.88 it drops under 4.5:1 on the gradient's light end. */
  --on-accent-muted: rgba(255, 255, 255, 0.90);
  /* The continue-reading card always carries fixed white text, so its
     gradient must stay dark in every theme. Deriving it from --accent broke
     the dark themes, where the accent is a light mint. */
  --cta-from: var(--emerald-700);
  --cta-to: var(--emerald-800);
  --danger: #9F1239;
  --danger-contrast: #FFFFFF;
  --hairline: rgba(127, 127, 127, 0.22);

  /* ---- Elevation (z) ---- */
  --z-sticky: 20;
  --z-header: 40;
  --z-player: 50;
  --z-nav: 55;
  --z-overlay: 70;
  --z-drawer: 80;
  /* Above the drawer and the modals, because it is launched from them and asks
     about what they are showing. Below toasts, so the answer's confirmation is
     not painted behind the dialog on its way out. */
  --z-confirm: 90;
  --z-toast: 95;
}

/* =========================================================================
   THEME: Light Parchment (default)
   ========================================================================= */
:root,
[data-theme='parchment'] {
  color-scheme: light;

  --bg: var(--parchment-50);
  --bg-subtle: var(--parchment-100);
  --bg-sunken: var(--parchment-200);

  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-hover: var(--parchment-100);
  --surface-active: var(--parchment-200);
  /* Translucent surface for sticky chrome — needs backdrop-filter behind it. */
  --surface-veil: rgba(253, 251, 247, 0.82);

  /* Text ramp is tuned so every step clears WCAG AA (4.5:1) against the
     darkest surface it lands on, while staying visibly dimmer than the one
     above it. Verified by tests/crossbrowser_test.py. */
  --text: var(--slate-800);
  --text-muted: var(--slate-600);
  --text-subtle: #55637A;
  --text-faint: #646E7C;
  --text-inverse: #FFFFFF;
  --text-arabic: #16241C;

  --border: var(--parchment-300);
  --border-soft: var(--parchment-200);
  --border-strong: #D3C4A6;

  --accent: var(--emerald-700);
  --accent-hover: var(--emerald-800);
  --accent-soft: var(--emerald-50);
  --accent-chip: var(--emerald-50);
  --accent-soft-hover: var(--emerald-100);
  --accent-border: var(--emerald-200);
  --accent-contrast: #FFFFFF;

  --gold: var(--gold-700);
  --gold-bright: var(--gold-600);
  --gold-soft: var(--gold-100);
  --gold-border: var(--gold-200);

  --highlight: rgba(217, 119, 6, 0.13);
  --highlight-border: var(--gold-600);

  --pattern-ink: 4, 120, 87;
  --pattern-opacity: 0.05;

  --shadow-xs: 0 1px 2px rgba(35, 25, 10, 0.05);
  --shadow-sm: 0 1px 3px rgba(35, 25, 10, 0.06), 0 1px 2px rgba(35, 25, 10, 0.04);
  --shadow-md: 0 4px 14px rgba(35, 25, 10, 0.07), 0 2px 4px rgba(35, 25, 10, 0.04);
  --shadow-lg: 0 12px 34px rgba(35, 25, 10, 0.10), 0 4px 10px rgba(35, 25, 10, 0.05);
  --shadow-xl: 0 24px 60px rgba(35, 25, 10, 0.14);
  --ring: 0 0 0 3px rgba(4, 120, 87, 0.28);
  --scrim: rgba(10, 12, 18, 0.46);
  --shadow-player: 0 -8px 30px rgba(35, 25, 10, 0.08);

  /* Select chevron: a background image, so it cannot inherit currentColor. */
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355637A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
}

/* =========================================================================
   THEME: Midnight Dark
   ========================================================================= */
[data-theme='midnight'] {
  color-scheme: dark;

  --bg: var(--slate-900);
  --bg-subtle: #131D33;
  --bg-sunken: var(--slate-950);

  --surface: #16203A;
  --surface-raised: #1B2745;
  --surface-hover: #1F2B4B;
  --surface-active: #263355;
  --surface-veil: rgba(15, 23, 42, 0.84);

  /* Text ramp is tuned so every step clears WCAG AA (4.5:1) against the
     darkest surface it lands on, while staying visibly dimmer than the one
     above it. Verified by tests/crossbrowser_test.py. */
  --text: #E7EDF5;
  --text-muted: var(--slate-300);
  --text-subtle: var(--slate-400);
  --text-faint: #7F8C9F;
  --text-inverse: var(--slate-900);
  --text-arabic: #F2F7F4;

  --border: #27334F;
  --border-soft: #1F2B44;
  --border-strong: #35446A;

  --accent: var(--emerald-400);
  --accent-hover: var(--emerald-300);
  --accent-soft: rgba(16, 185, 129, 0.13);
  --accent-chip: rgba(2, 24, 18, 0.30);
  --accent-soft-hover: rgba(16, 185, 129, 0.2);
  --accent-border: rgba(52, 211, 153, 0.34);
  --accent-contrast: #04241A;

  --gold: var(--gold-300);
  --gold-bright: var(--gold-400);
  --gold-soft: rgba(217, 119, 6, 0.16);
  --gold-border: rgba(251, 191, 36, 0.32);

  --highlight: rgba(52, 211, 153, 0.12);
  --highlight-border: var(--emerald-400);

  --pattern-ink: 148, 197, 178;
  --pattern-opacity: 0.055;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 14px 38px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 26px 64px rgba(0, 0, 0, 0.6);
  --ring: 0 0 0 3px rgba(52, 211, 153, 0.32);
  --scrim: rgba(2, 6, 16, 0.62);
  --shadow-player: 0 -8px 30px rgba(0, 0, 0, 0.45);

  /* Select chevron: a background image, so it cannot inherit currentColor. */
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
}

/* =========================================================================
   THEME: Deep Emerald (reading mode)
   ========================================================================= */
[data-theme='emerald'] {
  color-scheme: dark;

  --bg: var(--emerald-900);
  --bg-subtle: #05412F;
  --bg-sunken: var(--emerald-950);

  --surface: #06553D;
  --surface-raised: #076245;
  --surface-hover: #077A56;
  --surface-active: #088C62;
  --surface-veil: rgba(6, 78, 59, 0.86);

  /* Text ramp is tuned so every step clears WCAG AA (4.5:1) against the
     darkest surface it lands on, while staying visibly dimmer than the one
     above it. Verified by tests/crossbrowser_test.py. */
  --text: #E4F5EC;
  --text-muted: #BAE0CF;
  --text-subtle: #9BCFB6;
  --text-faint: #94C8B3;
  --text-inverse: var(--emerald-950);
  --text-arabic: #FBFDF9;

  --border: #0A6E4F;
  --border-soft: #075C42;
  --border-strong: #0E8A64;

  --accent: #84EBC2; /* one step lighter than emerald-300 so badge text clears AA */
  --accent-hover: var(--emerald-200);
  /* Ambient wash kept light but weak; the chip fill darkens instead. */
  --accent-soft: rgba(110, 231, 183, 0.07);
  --accent-chip: rgba(2, 44, 34, 0.35);
  --accent-soft-hover: rgba(110, 231, 183, 0.16);
  --accent-border: rgba(110, 231, 183, 0.34);
  --accent-contrast: var(--emerald-950);

  --gold: var(--gold-200); /* brighter than midnight's: the emerald ground is lighter */
  --gold-bright: var(--gold-100);
  --gold-soft: rgba(252, 211, 77, 0.14);
  --gold-border: rgba(252, 211, 77, 0.34);

  --highlight: rgba(252, 211, 77, 0.14);
  --highlight-border: var(--gold-300);

  --pattern-ink: 226, 245, 236;
  --pattern-opacity: 0.06;

  --shadow-xs: 0 1px 2px rgba(0, 20, 12, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 20, 12, 0.45), 0 1px 2px rgba(0, 20, 12, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 20, 12, 0.5), 0 2px 4px rgba(0, 20, 12, 0.3);
  --shadow-lg: 0 14px 38px rgba(0, 20, 12, 0.55), 0 4px 10px rgba(0, 20, 12, 0.35);
  --shadow-xl: 0 26px 64px rgba(0, 20, 12, 0.6);
  --ring: 0 0 0 3px rgba(110, 231, 183, 0.32);
  --scrim: rgba(1, 20, 14, 0.60);
  --shadow-player: 0 -8px 30px rgba(0, 20, 12, 0.45);

  /* Select chevron: a background image, so it cannot inherit currentColor. */
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238AC3AC' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
}