/* Niyya look: VxRail Sizer (VXRS). good / warn / bad keep their meaning;
   Dell blue becomes the site's ink and pink. */

:root {
  --bg: var(--niyya-paper);
  --surface: #fff;
  --surface-2: var(--niyya-paper);
  --border: var(--niyya-line);
  --border-strong: var(--niyya-line-2);
  --text: var(--niyya-ink);
  --muted: var(--niyya-muted);
  --primary: var(--niyya-pink-ink);
  --primary-dark: var(--niyya-ink);
  --primary-soft: var(--niyya-paper-2);
  --shadow: 0 1px 2px rgba(11, 11, 11, .05), 0 1px 3px rgba(11, 11, 11, .06);
}

/* ---- top bar: Export in the site's pink ---- */
.topbar { border-bottom: 1px solid var(--niyya-ink); }
.brand-logo { border-radius: 8px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); }
.brand-sub, .brand-short { color: var(--niyya-on-dark-2); }
.btn-primary { background: var(--niyya-ink); border-color: var(--niyya-ink); }
.btn-primary:hover { background: var(--niyya-ink-3); }
.topbar .btn-primary { background: var(--niyya-pink); border-color: var(--niyya-pink); color: var(--niyya-ink); }
.topbar .btn-primary:hover { background: #F383B5; }
.topbar .btn-ghost:hover { background: var(--niyya-dark-hover); }
.niyaa-mark { background: var(--niyya-ink); }
.avatar { background: var(--niyya-pink); color: var(--niyya-ink); }
.btn:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline-color: var(--niyya-pink); }

/* ---- steps, results ---- */
.step.is-active .n { background: var(--niyya-pink); border-color: var(--niyya-pink); color: var(--niyya-ink); }
.kpi.accent .label, .kpi.accent .sub { color: var(--niyya-on-dark); }
.meter-fill { background: var(--niyya-pink); }
.callout { border-left-color: var(--niyya-pink); }
.tab.is-active { border-bottom-color: var(--niyya-pink); }
.rack-svg .slot-drop { fill: rgba(240, 111, 168, .18); stroke: var(--niyya-pink); }
.rack-svg .item.selected rect.sel { stroke: var(--niyya-amber); }
.modal::backdrop { background: rgba(11, 11, 11, .45); }
.toast { background: var(--niyya-ink); }