/*!**********************
*     selection.css     *
************************/

@layer theme {
  ::-moz-selection {
    --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) var(--clr-light-500);
    color: var(--csstools-light-dark-toggle--0, var(--clr-light-500));
    --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) var(--clr-primary-700);
    background-color: var(--csstools-light-dark-toggle--1, var(--clr-primary-500));
  }
  ::selection {
    --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) var(--clr-light-500);
    color: var(--csstools-light-dark-toggle--0, var(--clr-light-500));
    --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) var(--clr-primary-700);
    background-color: var(--csstools-light-dark-toggle--1, var(--clr-primary-500));
  }

@supports (color: light-dark(red, red)) {
::-moz-selection {
    color: light-dark(var(--clr-light-500), var(--clr-light-500));
    background-color: light-dark(
      var(--clr-primary-500),
      var(--clr-primary-700)
    );
  }
::selection {
    color: light-dark(var(--clr-light-500), var(--clr-light-500));
    background-color: light-dark(
      var(--clr-primary-500),
      var(--clr-primary-700)
    );
  }
}

  a::-moz-selection {
    --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) var(--clr-secondary-400);
    color: var(--csstools-light-dark-toggle--2, var(--clr-secondary-300));
  }

  a::selection {
    --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) var(--clr-secondary-400);
    color: var(--csstools-light-dark-toggle--2, var(--clr-secondary-300));
  }

@supports (color: light-dark(red, red)) {
a::-moz-selection {
    color: light-dark(var(--clr-secondary-300), var(--clr-secondary-400));
  }
a::selection {
    color: light-dark(var(--clr-secondary-300), var(--clr-secondary-400));
  }
}
}