/* Niyya look: HCI Hero. Light and dark themes (the moon/sun toggle sets
   data-theme on <html>). Platform colours (--pc), the score scale
   (--sc0..3) and the Word / PowerPoint / Excel badges are kept. The
   business / technical / both tags become the three Niyya dots. */

:root {
  --blue: var(--niyya-ink);
  --blue-2: var(--niyya-ink-3);
  --blue-3: var(--niyya-pink-ink);
  --light: var(--niyya-pink);
  --pale: var(--niyya-paper-2);
  --ink: var(--niyya-ink);
  --muted: var(--niyya-muted);
  --line: var(--niyya-line);
  --bg: var(--niyya-paper);
  --card: #fff;
  --field: #fff;
  --shadow: 0 1px 2px rgba(11, 11, 11, .04), 0 4px 16px rgba(11, 11, 11, .05);
}
:root[data-theme="dark"] {
  --blue: var(--niyya-pink);
  --blue-2: #F383B5;
  --blue-3: #F7A3C8;
  --light: #7A3D5B;
  --pale: #1F1F1F;
  --ink: #F5F4F0;
  --muted: #A3A29C;
  --line: var(--niyya-ink-line);
  --bg: var(--niyya-ink);
  --card: var(--niyya-ink-2);
  --field: #111111;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 30px rgba(0, 0, 0, .25);
}

/* ---- top bar: ink in both themes, with the reversed logo ---- */
.topbar { background: var(--niyya-ink); border-bottom-color: var(--niyya-ink); }
.topbar .logo-light { display: none; }
/* The reversed logo sits on a navy panel: in grey with doubled contrast
   the panel goes black, and invert(.043) lifts that to the ink #0B0B0B. */
.topbar .logo-dark { display: block; filter: grayscale(1) contrast(2) invert(.043); }
.nav > a { position: relative; color: var(--niyya-on-dark); }
.nav > a:hover { background: var(--niyya-dark-hover); color: #fff; }
.nav > a.on { background: transparent; color: #fff; }
.nav > a.on::after {
  content: ""; position: absolute; inset-inline: 12px; bottom: 2px; height: 2px; border-radius: 2px;
  background: var(--niyya-rainbow);
}
.auth { border-left-color: var(--niyya-dark-line); }
.topbar .who { color: #fff; }
.topbar .who.guest { color: var(--niyya-on-dark); }
.topbar .who.guest .avatar { background: var(--niyya-ink-3); color: var(--niyya-on-dark); }
.topbar .avatar { background: var(--niyya-pink); color: var(--niyya-ink); }
.topbar .btn-primary, [data-theme="dark"] .topbar .btn-primary { background: #fff; color: var(--niyya-ink); }
.topbar .btn-primary:hover { background: var(--niyya-paper-2); }
.theme-toggle, .nav-toggle { background: transparent; border-color: rgba(255, 255, 255, .3); color: var(--niyya-on-dark); }
.theme-toggle:hover, .nav-toggle:hover { background: var(--niyya-dark-hover); color: #fff; }
.nav-toggle span:not(.sr) { background: #fff; }
@media (max-width: 1080px) {
  .nav { background: var(--niyya-ink); border-bottom-color: var(--niyya-ink-line); }
  .auth { border-top-color: var(--niyya-dark-line); }
}
.guestbar, [data-theme="dark"] .guestbar { background: var(--niyya-ink-2); border-top: 1px solid var(--niyya-dark-line); }
.btn-light { color: var(--niyya-ink); }

/* ---- hero: the site's dark glow ---- */
.hero { background: var(--niyya-hero); }
.hero .lead, .stats span { color: var(--niyya-on-dark); }
.hero .eyebrow { color: var(--niyya-pink); }
.hero-mark { filter: grayscale(1) contrast(1.6); }

/* ---- body ---- */
.btn-primary:hover { background: var(--niyya-ink-3); }
.meter span { background: var(--niyya-pink); }
.h2 { background: var(--niyya-paper-2); }
.tag-tech { background: var(--niyya-pink-soft); color: var(--niyya-pink-ink); }
.tag-biz { background: var(--niyya-amber-soft); color: var(--niyya-amber-ink); }
.tag-both { background: var(--niyya-green-soft); color: var(--niyya-green-ink); }
.dot-tech { background: var(--niyya-pink); }
.dot-biz { background: var(--niyya-amber); }
.dot-both { background: var(--niyya-green); }
.seg-sw_term { background: var(--niyya-ink); }
.seg-hw { background: var(--niyya-pink); }
.seg-hw_support { background: #F7B5D2; }
.seg-windows { background: var(--niyya-amber); }
.seg-services { background: var(--niyya-muted); }

/* ---- dark theme: white buttons as on the site's hero, ink text on pink ---- */
[data-theme="dark"] .btn-primary { background: #fff; color: var(--niyya-ink); }
[data-theme="dark"] .btn-primary:hover { background: var(--niyya-paper-2); }
[data-theme="dark"] .step-no,
[data-theme="dark"] .chip input:checked + span,
[data-theme="dark"] .rank:first-child .rank-no,
[data-theme="dark"] .dtabs button[aria-selected="true"] { background: var(--niyya-pink); border-color: var(--niyya-pink); color: var(--niyya-ink); }
[data-theme="dark"] .chip input:checked + span .tag { background: rgba(11, 11, 11, .15); color: var(--niyya-ink); }
[data-theme="dark"] .h2 { background: #1F1F1F; }
[data-theme="dark"] .tag-tech { background: #3A1F2C; color: #F7A3C8; }
[data-theme="dark"] .seg-sw_term { background: #E8E6E0; }
[data-theme="dark"] .svg-box { background: #fff; }