/* ===========================================================================
   MyrTech Ember theme overlay for the LMS SPA (/lms).
   Forces dark mode + remaps the frappe-ui blue accent family to ember orange
   + sets the brand font. Loaded after the app's own stylesheet so it wins.
   =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

/* remap blue AND green accent families -> ember orange (both themes).
   LMS's primary/brand accent is the green family, so it must be remapped too. */
:root,
[data-theme="dark"]{
  --ink-blue-1:#fff2ec; --ink-blue-2:#ffe0d2; --ink-blue-3:#ffc3a8; --ink-blue-4:#ff9e75;
  --ink-blue-5:#ff7a45; --ink-blue-6:#ff642d; --ink-blue-7:#ed520f; --ink-blue-8:#c4440d;
  --ink-blue-9:#97350a; --ink-blue-10:#6e2610;
  --surface-blue-1:#2a1711; --surface-blue-2:#3a1d13; --surface-blue-3:#4a2316; --surface-blue-4:#ff9e75;
  --surface-blue-5:#ff7a45; --surface-blue-6:#ff642d; --surface-blue-7:#ed520f; --surface-blue-8:#c4440d;
  --surface-blue-9:#97350a; --surface-blue-10:#6e2610;
  --outline-blue-1:#3a1d13; --outline-blue-2:#4a2316; --outline-blue-3:#6e2610; --outline-blue-4:#ff9e75;
  --outline-blue-5:#ff7a45; --outline-blue-6:#ff642d; --outline-blue-7:#ed520f; --outline-blue-8:#c4440d;
  --outline-blue-9:#97350a; --outline-blue-10:#6e2610;

  --ink-green-1:#fff2ec; --ink-green-2:#ffe0d2; --ink-green-3:#ffc3a8; --ink-green-4:#ff9e75;
  --ink-green-5:#ff7a45; --ink-green-6:#ff642d; --ink-green-7:#ed520f; --ink-green-8:#c4440d;
  --ink-green-9:#97350a; --ink-green-10:#6e2610;
  --surface-green-1:#2a1711; --surface-green-2:#3a1d13; --surface-green-3:#4a2316; --surface-green-4:#ff9e75;
  --surface-green-5:#ff7a45; --surface-green-6:#ff642d; --surface-green-7:#ed520f; --surface-green-8:#c4440d;
  --surface-green-9:#97350a; --surface-green-10:#6e2610;
  --outline-green-1:#3a1d13; --outline-green-2:#4a2316; --outline-green-3:#6e2610; --outline-green-4:#ff9e75;
  --outline-green-5:#ff7a45; --outline-green-6:#ff642d; --outline-green-7:#ed520f; --outline-green-8:#c4440d;
  --outline-green-9:#97350a; --outline-green-10:#6e2610;
}

/* ember ink background + brand font */
html[data-theme="dark"], html[data-theme="dark"] body{ background-color:#0c0c0d !important; }
body{ font-family:'IBM Plex Sans Arabic','Space Grotesk',system-ui,sans-serif !important; }

/* keep hard-coded blue links/buttons on brand too */
[data-theme="dark"] a:not(.es-button):hover{ color:#ff642d; }

/* LMS default logo is an inline SVG with a hard-coded green (#0E7159).
   Recolor its background shape to ember orange so the brand matches. */
svg path[fill="#0E7159"]{ fill:#ff642d !important; }

/* ===========================================================================
   RTL for Arabic. The layout uses CSS logical utilities (start/end, ms/me,
   border-s/border-e) so dir="rtl" on <html> flips the whole chrome — sidebar
   moves to the right, text aligns right. These add safety for the rendered
   lesson/prose body and keep Latin code/pre blocks left-to-right. */
[dir="rtl"] .prose,
[dir="rtl"] .ProseMirror,
[dir="rtl"] .lesson-content{ text-align:right; }
[dir="rtl"] .prose pre,
[dir="rtl"] .prose code,
[dir="rtl"] .ProseMirror pre,
[dir="rtl"] .ProseMirror code{ direction:ltr; text-align:left; unicode-bidi:plaintext; }
/* lists sit on the right in RTL */
[dir="rtl"] .prose ul,
[dir="rtl"] .prose ol,
[dir="rtl"] .lesson-content ul,
[dir="rtl"] .lesson-content ol{ padding-right:1.5em; padding-left:0; }