/* Niyya look: Migration Tool Selector. It has a light and a dark theme
   (follows the system, or the moon/sun toggle); both are mapped. */

:root {
  --bg: var(--niyya-paper);
  --surface: #fff;
  --surface-2: var(--niyya-paper-2);
  --ink: var(--niyya-ink);
  --ink-2: var(--niyya-muted);
  --line: var(--niyya-line);
  --line-2: var(--niyya-paper-2);
  --brand: var(--niyya-ink);
  --brand-ink: var(--niyya-ink-3);
  --purple: var(--niyya-pink-ink);
  --green: var(--niyya-green-ink);
  --shadow: 0 1px 2px rgba(11, 11, 11, .04), 0 4px 16px rgba(11, 11, 11, .04);
  --mts-link: var(--niyya-pink-ink);
  --mts-link-hover: var(--niyya-ink);
}
body { background: var(--bg); }
a, .linkish { color: var(--mts-link); }
a:hover, .linkish:hover { color: var(--mts-link-hover); }
.stat b { color: var(--ink); }
.phase::before { background: var(--niyya-pink); }

/* ---- top bar: ink in both themes ---- */
.topbar { background: var(--niyya-ink); border-bottom-color: var(--niyya-ink); }
.brand { color: #fff; }
.brand-mark svg { border-radius: 7px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); }
.brand-mark svg path { stroke: var(--niyya-pink); }
.brand-text small { color: var(--niyya-on-dark-2); }
.nav > a { position: relative; color: var(--niyya-on-dark); }
.nav > a:hover { background: var(--niyya-dark-hover); color: #fff; }
.nav > a.on { color: #fff; background: transparent; }
.nav > a.on::after {
  content: ""; position: absolute; inset-inline: 11px; bottom: 1px; height: 2px; border-radius: 2px;
  background: var(--niyya-rainbow);
}
.topbar-auth, .topbar .who { border-left-color: var(--niyya-dark-line); }
.topbar .who, .topbar .who.muted { color: var(--niyya-on-dark); }
.topbar a.who:hover { background: var(--niyya-dark-hover); color: #fff; }
.topbar .btn-quiet, .theme-toggle { color: var(--niyya-on-dark); border-color: rgba(255, 255, 255, .3); }
.topbar .btn-quiet:hover, .theme-toggle:hover { background: var(--niyya-dark-hover); color: #fff; }
.avatar { background: var(--niyya-pink); color: var(--niyya-ink); }

input:focus, select:focus, textarea:focus { outline-color: rgba(240, 111, 168, .45); border-color: var(--niyya-pink); }

/* ---- dark theme: the site's ink, with white buttons as on its hero ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--niyya-ink);
    --surface: var(--niyya-ink-2);
    --surface-2: #1F1F1F;
    --ink: #F5F4F0;
    --ink-2: var(--niyya-on-dark);
    --line: var(--niyya-ink-line);
    --line-2: #202020;
    --brand: var(--niyya-pink);
    --brand-ink: #F7A3C8;
    --purple: #F7A3C8;
    --green: var(--niyya-green);
    --amber: var(--niyya-amber);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    --mts-link: var(--niyya-pink);
    --mts-link-hover: #fff;
  }
  :root:not([data-theme="light"]) .btn,
  :root:not([data-theme="light"]) .tabs button[aria-selected="true"] { background: #fff; border-color: #fff; color: var(--niyya-ink); }
  :root:not([data-theme="light"]) .btn:hover { background: var(--niyya-paper-2); color: var(--niyya-ink); }
  :root:not([data-theme="light"]) .btn-quiet { background: transparent; color: var(--ink-2); border-color: var(--line); }
  :root:not([data-theme="light"]) .btn-quiet:hover { background: var(--surface-2); color: var(--ink); }
  :root:not([data-theme="light"]) .topbar { border-bottom-color: var(--niyya-ink-line); }
}
:root[data-theme="dark"] {
  --bg: var(--niyya-ink);
  --surface: var(--niyya-ink-2);
  --surface-2: #1F1F1F;
  --ink: #F5F4F0;
  --ink-2: var(--niyya-on-dark);
  --line: var(--niyya-ink-line);
  --line-2: #202020;
  --brand: var(--niyya-pink);
  --brand-ink: #F7A3C8;
  --purple: #F7A3C8;
  --green: var(--niyya-green);
  --amber: var(--niyya-amber);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  --mts-link: var(--niyya-pink);
  --mts-link-hover: #fff;
}
:root[data-theme="dark"] .btn,
:root[data-theme="dark"] .tabs button[aria-selected="true"] { background: #fff; border-color: #fff; color: var(--niyya-ink); }
:root[data-theme="dark"] .btn:hover { background: var(--niyya-paper-2); color: var(--niyya-ink); }
:root[data-theme="dark"] .btn-quiet { background: transparent; color: var(--ink-2); border-color: var(--line); }
:root[data-theme="dark"] .btn-quiet:hover { background: var(--surface-2); color: var(--ink); }
:root[data-theme="dark"] .topbar { border-bottom-color: var(--niyya-ink-line); }

/* the top bar's own controls stay light-on-ink whatever the theme */
.topbar .btn.btn-quiet { background: transparent; color: var(--niyya-on-dark); border-color: rgba(255, 255, 255, .3); }
.topbar .btn.btn-quiet:hover { background: var(--niyya-dark-hover); color: #fff; }

@media print {
  body { background: #fff; }
}