/* Niyya look: Amr SVG Editor (magic-image). Light and dark themes
   (data-theme on <html>, dark by default). Purple-tinted greys become
   the site's warm paper and ink, magenta becomes its pink. The code
   view's syntax colours are kept. */

:root {
  --bg: var(--niyya-paper-2); --bg-alt: #fff; --panel: #fff; --panel-hi: var(--niyya-paper-3);
  --border: var(--niyya-line); --text: var(--niyya-ink); --text-dim: var(--niyya-muted);
  --accent: var(--niyya-pink); --accent-hi: var(--niyya-pink-ink); --canvas: var(--niyya-paper-3);
  --checker-a: #fff; --checker-b: #E9E6DF;
  --shadow: 0 10px 40px rgba(11, 11, 11, .2);
}
[data-theme="dark"] {
  --bg: var(--niyya-ink); --bg-alt: #121212; --panel: var(--niyya-ink-2); --panel-hi: #232323;
  --border: var(--niyya-ink-line); --text: #F5F4F0; --text-dim: #A3A29C;
  --accent: var(--niyya-pink); --accent-hi: #F7A3C8; --canvas: #070707;
  --checker-a: #333; --checker-b: #262626;
  --shadow: 0 12px 48px rgba(0, 0, 0, .55);
}

/* ---- menu bar: ink in both themes ---- */
.menubar { background: var(--niyya-ink); border-bottom-color: var(--niyya-ink-line); color: #fff; }
.menubar .brand { color: #fff; }
.menubar .menu-btn:hover, .menubar .menu-btn[aria-expanded="true"] { background: var(--niyya-dark-hover); }
.menubar .doc-title { color: var(--niyya-on-dark-2); }

/* ---- pink fills carry ink, not white ---- */
.menu-item:hover:not(:disabled), .menu-item:focus-visible,
.tb.on, .tb[aria-pressed="true"], .btn.accent, .node.sel { color: var(--niyya-ink); }
.menu-item:hover:not(:disabled) .key,
.node.sel .twisty, .node.sel .nid, .node.sel .extra { color: rgba(11, 11, 11, .6); }
.btn.accent:hover:not(:disabled) { background: #F383B5; border-color: #F383B5; }
.drop-hint { background: rgba(240, 111, 168, .28); }
#sourceText::selection { background: rgba(240, 111, 168, .35); }

/* ---- sign-in page ---- */
.login-page { background: var(--niyya-hero); color: #F5F4F0; }
.login-card { background: var(--niyya-ink-2); border-color: var(--niyya-ink-line); }
.login-card label { color: #A3A29C; }
.login-card input { background: var(--niyya-ink); border-color: var(--niyya-ink-line); color: #F5F4F0; }
.login-card small { color: #7A7973; }