/* Niyya look: Nutanix Sizer Ultra. A static page (index.html), so its
   <head> carries the brand <link>s by hand. Nutanix purple becomes the
   site's ink, with pink and green for the accents; the error / warn / ok
   notices keep their meaning. */

:root {
  --nx-ink: var(--niyya-ink);
  --nx-primary: var(--niyya-ink);
  --nx-primary-light: #9A9890;
  --nx-primary-dark: var(--niyya-ink-3);
  --nx-primary-050: var(--niyya-paper-2);
  --nx-primary-100: var(--niyya-line);
  --nx-primary-200: var(--niyya-line-2);
  --nx-gray: var(--niyya-text-2);
  --nx-gray-light: var(--niyya-muted);
  --nx-bg: var(--niyya-paper);
  --nx-surface: var(--niyya-paper-2);
  --nx-surface-alt: var(--niyya-paper);
  --nx-line: var(--niyya-line);
  --nx-line-strong: var(--niyya-line-2);
  --nx-teal: var(--niyya-green-ink);
  --shadow-sm: 0 1px 2px rgba(11, 11, 11, .05), 0 1px 3px rgba(11, 11, 11, .04);
  --shadow: 0 2px 8px rgba(11, 11, 11, .06), 0 8px 24px rgba(11, 11, 11, .05);
}
a { color: var(--niyya-pink-ink); }

/* ---- side bar: ink, the current step in white ---- */
.brand-sub, .nav-sep, .sidebar-foot { color: var(--niyya-on-dark-2); }
.nav-item { color: var(--niyya-on-dark); }
.nav-item.active { background: #fff; color: var(--niyya-ink); }
.nav-item.active .step-n { background: var(--niyya-pink); color: var(--niyya-ink); }
.nav-item.done .step-n { background: var(--niyya-green); color: var(--niyya-ink); }
.brand-icon { border-radius: 9px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); }

/* ---- body ---- */
.btn-dark:hover { background: var(--niyya-ink-3); }
.btn-primary:hover { background: var(--niyya-ink-3); }
input:focus, select:focus, textarea:focus { border-color: var(--niyya-pink); box-shadow: 0 0 0 3px rgba(240, 111, 168, .18); }
table.tbl tbody tr:hover { background: var(--niyya-paper); }
.kpi::before, .progress > div { background: var(--niyya-pink); }
.kpi.teal::before { background: var(--niyya-green); }
.pill.teal { background: var(--niyya-green-soft); color: var(--niyya-green-ink); }
.subtab.on { border-bottom-color: var(--niyya-pink); }