:where(html, body) {
  background-color: var(--color-background);
  color: var(--color-text-secondary)}


:where(h1, h2, h3, .h1, .h2, .h3) {
  color: var(--color-heading)}
:where(h4),:where(h5),:where(h6),:where(.h4),:where(.h5),:where(.h6),:where(.subtitle),:where(.sub-title){
  color: var(--color-subheading)}
:where(p),:where(li),:where(dd),:where(.description),:where(.desc),:where(.text-body){
  color: var(--color-text-secondary)}
:where(small),:where(.small),:where(.text-muted),:where(.help-text),:where(.form-text),:where(figcaption){
  color: var(--color-text-muted)}


:where(a) { color: var(--color-link)}
:where(a:hover) { color: var(--color-link-hover)}


:where(.card, .panel, .well, .cv2-card, .sw-card, .modal-content, .dropdown-menu, .popover, .iziModal) {
  background-color: var(--color-surface);
  color: var(--color-card-text);
  border-color: var(--color-border);
  border-radius: var(--cv2-radius-card)}
:where(.card, .panel, .cv2-card, .sw-card) :where(.card-title),:where(.card, .panel, .cv2-card, .sw-card) :where(.panel-title),:where(.card, .panel, .cv2-card, .sw-card) :where(h1),:where(.card, .panel, .cv2-card, .sw-card) :where(h2),:where(.card, .panel, .cv2-card, .sw-card) :where(h3),:where(.card, .panel, .cv2-card, .sw-card) :where(h4),:where(.card, .panel, .cv2-card, .sw-card) :where(h5),:where(.card, .panel, .cv2-card, .sw-card) :where(h6){
  color: var(--color-card-title)}
:where(.card, .panel, .cv2-card, .sw-card) :where(p),:where(.card, .panel, .cv2-card, .sw-card) :where(.card-text),:where(.card, .panel, .cv2-card, .sw-card) :where(.card-description){
  color: var(--color-card-text)}
:where(.dropdown-menu, .sub-menu) :where(a),:where(.dropdown-menu, .sub-menu) :where(.dropdown-item){ color: var(--color-text-primary)}
:where(.dropdown-menu, .sub-menu) :where(.active){
  background-color: var(--color-primary-soft);
  color: var(--color-on-primary-soft)}
:where(.dropdown-menu, .sub-menu) :where(a:hover),:where(.dropdown-menu, .sub-menu) :where(.dropdown-item:hover){
  background-color: var(--color-primary-soft);
  color: var(--color-on-primary-soft)}
:where(.modal-backdrop),:where(.iziModal-overlay){ background-color: var(--color-overlay)}


:where(.btn-primary, .button-primary, button[type="submit"].primary) {
  background:var(--color-gradient);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--cv2-radius-btn)}
:where(.btn-primary):where(:hover),:where(.button-primary):where(:hover){
  background: var(--color-primary-hover);
  color: var(--color-on-primary)}
:where(.btn-primary):where(:active, .active),:where(.button-primary):where(:active, .active){ background: var(--color-primary-active)}
:where(.btn-secondary):where(:hover),:where(.button-secondary):where(:hover){ background: var(--color-secondary-hover)}


:where(input:not([type="checkbox"], [type="radio"], [type="color"], [type="range"]), select, textarea, .form-control) {
  background-color: var(--color-input-bg);
  border-color: var(--color-input-border);
  color: var(--color-text-primary);
  border-radius: var(--cv2-radius-input)}
:where(input)::placeholder,:where(textarea)::placeholder{ color: var(--color-input-placeholder)}
:where(input):focus-visible,:where(select):focus-visible,:where(textarea):focus-visible,:where(button):focus-visible,:where(a):focus-visible,:where([tabindex]):focus-visible{outline: 2px solid var(--color-focus-ring)}
:where(input[type="checkbox"]),:where(input[type="radio"]){ accent-color: var(--color-primary)}


:where(table) { border-color: var(--color-border)}
:where(th),:where(thead td){
  background-color: var(--color-table-head-bg);
  color: var(--color-table-head-text)}
:where(td) { color: var(--color-text-secondary); border-color: var(--color-border)}
:where(tbody tr:hover) { background-color: var(--color-table-row-hover)}


:where(.alert-success, .notice-success) { background: var(--color-success-soft); color: var(--color-text-primary); border-color: var(--color-success)}
:where(.alert-warning),:where(.notice-warning){ background: var(--color-warning-soft); color: var(--color-text-primary); border-color: var(--color-warning)}
:where(.alert-danger),:where(.alert-error),:where(.notice-error){ background: var(--color-danger-soft); color: var(--color-text-primary); border-color: var(--color-danger)}
:where(.nav-tabs .nav-link.active),:where(.pagination .active a),:where(.pagination .active span),:where(.page-item.active .page-link){
  background:var(--color-gradient);
  border-color: var(--color-primary);
  color: var(--color-on-primary)}
:where(.nav-link:hover),:where(.page-link:hover){ color: var(--color-link-hover)}
:where([disabled]),:where(.disabled){ opacity: 0.55}


:where(svg.icon, .icon) { color: var(--color-icon)}

::selection { background: var(--color-primary-soft-strong); color: var(--color-text-primary)}